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에 설명된 비동기 요청 데이터에 필요한 매개변수를 살펴보겠습니다.

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

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

여기서 기본값(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와 함께 제공되는 시간 상자입니다.

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

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

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

  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; }
 
    }

이 시점에서 모든 로직이 작성되었습니다. 강조해야 할 점은 조건부 필터링을 수행할 때 다음과 같이 검색 버튼에 속성을 추가해야 한다는 것입니다.

그런 다음 작업 열은 외부적으로 html로 바인딩됩니다.

사용자 정의해야 하는 경우 열에서는 LayUI 프레임워크와 함께 제공되는 템플릿 구문을 사용합니다. 다음 그림은 응용 프로그램 날짜 열의 시간 형식 변환입니다.

효과 그림:

위 내용은 Layui에서 테이블을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!