How to create table in layui

The table module is another thoughtful work of layui. It is newly launched in the layui 2.0 version and is one of the core components of layui. It is used to perform a series of functions and dynamic data operations on tables, covering almost all needs involved in daily business. Recommended: layui usage tutorial

Supports fixed headers, fixed rows, fixed column left/column right, supports dragging to change column width, supports sorting, supports multi-level headers, and supports units Custom templates for grids, supporting table overloading (such as search, conditional filtering, etc.), support for check boxes, paging, cell editing, and other functions.

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>

Let’s first look at the parameters required for asynchronous request data described in the API:

The default parameters are page and limit. You can modify the parameter name as needed. The two parameters are our traditional page number and page size.

where is other additional parameters. You can choose whether to pass the value according to the needs of the front page.

Here I modified the default value (in the table.js file) and changed the original page and limit to Start and Length:

The following is the background Action logic:

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

Here we add three parameters in addition to the default two parameters, which correspond to the front-end search box. The time period is quite special and is the time box that comes with layui, as shown below:

When printed out in the front desk, we can see the following format:

So it needs to be converted to facilitate background filtering:

Then paste the code for the return data format:

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

The LayTableResult here is a class defined by yourself according to the needs of the page, as follows (T is the table you want to return ):

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

At this point, all the logic has been written. One thing that needs to be emphasized is that when you perform conditional filtering, you should add an attribute to the search button, as follows:

Then the operation column is bound in the external html:

If you need to customize the column, use the LayUI framework The built-in template syntax, the following picture is a time format conversion of the application date column:

Rendering:

The above is the detailed content of How to create table in layui. For more information, please follow other related articles on the PHP Chinese website!