Layui에서 테이블을 생성하는 방법-레이이 튜토리얼-php.cn

Layui에서 테이블을 생성하는 방법

尚

풀어 주다： 2019-11-26 14:05:23

앞으로

3628명이 탐색했습니다.

Layui에서 테이블을 생성하는 방법

테이블 모듈은 Layui의 또 다른 사려 깊은 작업입니다. Layui 2.0 버전에서 새롭게 출시되었으며 Layui의 핵심 구성 요소 중 하나입니다. 이는 테이블에서 일련의 기능과 동적 데이터 작업을 수행하는 데 사용되며 일상 업무와 관련된 거의 모든 요구 사항을 충족합니다. 권장 사항: layui 사용 튜토리얼

고정 헤더, 고정 행, 고정 열 왼쪽/오른쪽 열 지원, 드래그하여 열 너비 변경 지원, 정렬 지원, 다중 레벨 헤더 지원, 셀에 대한 사용자 정의 템플릿 지원, 페어링 지원 테이블 오버로드 (예: 검색, 조건부 필터링 등), 확인란, 페이징, 셀 편집 및 기타 기능을 지원합니다.

HTML:

<div class="row" id="divParams">
        <div class="panel col-md-12">
            <br />
            <div class="demoTable">
                关键字：
                <div class="layui-inline">
                    <input name="id" class="layui-input" id="keyword" placeholder="请输入查询关键字">
                </div>
                时间段：
                <div class="layui-inline">
                    <input class="layui-input" id="timearea" placeholder="请选择查询时间段" type="text">
                </div>
                <button class="layui-btn" data-type="reload" οnclick="initTable();">搜索</button>
            </div>
            <table class="layui-table" id="demo" lay-filter="demo"></table>
        </div>
    </div>
    <script id="dateTpl" type="text/html">
        {{#  var fn = function(){
        return moment(d.ApplyDate).format("YYYY-MM-DD");
         }; if(true){ }}
        {{ fn() }}
        {{#  } }}
 
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-mini" lay-event="detail"> 查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit"> 编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"> 删除</a>
    </script>

로그인 후 복사

JavaScript:

<script>
        $(document).ready(function () {
 
            initTable();
        });
        layui.use(&#39;laydate&#39;, function () {
            var laydate = layui.laydate;
            //时间选择器
            laydate.render({
                elem: &#39;#timearea&#39;
                , range: true
            });
 
        });
        function initTable() {
            var timeArea = $("#timearea").val();
            var startTime = "";
            var endTime = "";
            if (timeArea) {
                startTime = timeArea.split(" - ")[0];//开始时间
                endTime = timeArea.split(" - ")[1];//结束时间
            }
            layui.use(&#39;table&#39;, function () {
                var table = layui.table;
                //执行渲染
                table.render({
                    id: &#39;demo&#39;,
                    elem: &#39;#demo&#39; //指定原始表格元素选择器（推荐id选择器）
                    , height: 315 //容器高度
                    , cols: [[{ checkbox: true }
                        , { field: &#39;DepartmentName&#39;, title: &#39;单位名称&#39;, width: 180, sort: true }
                        , { field: &#39;ISName&#39;, title: &#39;信息系统名称&#39;, width: 200, sort: true }
                        , { field: &#39;CloudType&#39;, title: &#39;上云类别&#39;, width: 130, sort: true }
                        , { field: &#39;ContactPerson&#39;, title: &#39;联络人&#39;, width: 130, sort: true }
                        , { field: &#39;ContactPhoneNumber&#39;, title: &#39;联络人手机&#39;, width: 130 }
                        , { field: &#39;ApplyDate&#39;, title: &#39;申请日期&#39;, width: 150, sort: true, templet: &#39;#dateTpl&#39; }
                        , { field: &#39;CloudState&#39;, title: &#39;操作&#39;, width: 160, fixed: &#39;right&#39;, toolbar: &#39;#barDemo&#39; }
                    ]],
                    url: &#39;/Order/GetTableData/&#39;,
                    where: { KeyWords: $("#keyword").val(), StartTime: startTime, EndTime: endTime },
                    method: &#39;post&#39;,
                    limits: [10, 20, 30, 50, 100]
                    , limit: 10, //默认采用10
                    loading: true,
                    page: true
 
                });
                //监听工具条
                table.on(&#39;tool(demo)&#39;, function (obj) {
                    var data = obj.data;
                    if (obj.event === &#39;detail&#39;) {
                        layer.msg(&#39;ID：&#39; + data.applyid + &#39; 的查看操作&#39;);
                    } else if (obj.event === &#39;del&#39;) {
                        layer.confirm(&#39;真的删除行么&#39;, function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === &#39;edit&#39;) {
                        layer.alert(&#39;编辑行：<br>&#39; + JSON.stringify(data))
                    }
                });
 
            });
        } 
 
    </script>

로그인 후 복사

먼저 API에 설명된 비동기 요청 데이터에 필요한 매개변수를 살펴보겠습니다.

Layui에서 테이블을 생성하는 방법

기본적으로 페이지 및 제한이 전달되며 매개변수 이름은 다음과 같이 수정할 수 있습니다. 두 가지 매개변수가 필요합니다. 이는 전통적인 페이지 번호와 페이지 크기입니다.

다른 추가 매개변수는 어디에 있습니까? 첫 페이지의 필요에 따라 값을 전달할지 여부를 선택할 수 있습니다.

여기서 기본값(table.js 파일에서)을 수정하고 원본 페이지와 제한을 시작 및 길이로 변경했습니다.

다음은 배경 작업 논리입니다.

public ActionResult GetTableData(string Start, string Length, string KeyWords, string StartTime,string EndTime)
        {
            if (string.IsNullOrWhiteSpace(Start) || string.IsNullOrWhiteSpace(Length))
            {
                return Json(new { Success = false, Message = "" }, JsonRequestBehavior.AllowGet);
            }
            var demoList = orderdal.getDemoData(Start, Length, KeyWords, StartTime, EndTime);
            return Json(demoList, JsonRequestBehavior.AllowGet);
        }

로그인 후 복사

여기서 기본 2개를 제외하고 매개변수 외에도 프런트엔드 검색 상자에 해당하는 세 가지 추가 매개변수가 있습니다. 이는 아래와 같이 Laui와 함께 제공되는 시간 상자입니다.

Layui에서 테이블을 생성하는 방법

프런트엔드에서 형식이 다음과 같은 것을 볼 수 있습니다.

Layui에서 테이블을 생성하는 방법

따라서 백그라운드 필터링을 용이하게 하기 위해 변환해야 합니다.

Layui에서 테이블을 생성하는 방법

그런 다음 반환 데이터 형식에 대한 코드를 붙여넣습니다.

  public LayTableResult<V_MoveUnionDeployCloudBase> getDemoData(string Start, string Length, string KeyWords, string StartTime, string EndTime)
        {
            ....==.
            LayTableResult<V_MoveUnionDeployCloudBase> result = new LayTableResult<V_MoveUnionDeployCloudBase>()
            {
                code = seleResult.Any() ? 0 : 1,
                count = resultCount,//总条数
                data = seleResult,
                msg = ""
            };
 
            return result;
        }

로그인 후 복사

여기의 LayTableResult는 다음과 같이 페이지의 필요에 따라 직접 정의한 클래스입니다. (T는 반환할 테이블입니다.)

 public class LayTableResult<T>
    {
        public int code { get; set; }
        public string msg { get; set; }
        public int count { get; set; }
        public List<T> data { get; set; }
 
    }

로그인 후 복사

Layui에서 테이블을 생성하는 방법