layui怎么創(chuàng)建table模塊

layui怎么創(chuàng)建table模塊？針對這個問題，這篇文章給出了相對應(yīng)的分析和解答，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。

table模塊是layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的組成之一。它用于對表格進(jìn)行一些列功能和動態(tài)化數(shù)據(jù)操作，涵蓋了日常業(yè)務(wù)所涉及的幾乎全部需求。推薦：layui使用教程

支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持對表格重載（比如搜索、條件篩選等），支持復(fù)選框，支持分頁，支持單元格編輯等等一些列功能。

HTML：

<div class="row" id="divParams">
        <div class="panel col-md-12">
            <br />
            <div class="demoTable">
                關(guān)鍵字：
                <div class="layui-inline">
                    <input name="id" class="layui-input" id="keyword" placeholder="請輸入查詢關(guān)鍵字">
                </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('laydate', function () {
            var laydate = layui.laydate;
            //時間選擇器
            laydate.render({
                elem: '#timearea'
                , range: true
            });
 
        });
        function initTable() {
            var timeArea = $("#timearea").val();
            var startTime = "";
            var endTime = "";
            if (timeArea) {
                startTime = timeArea.split(" - ")[0];//開始時間
                endTime = timeArea.split(" - ")[1];//結(jié)束時間
            }
            layui.use('table', function () {
                var table = layui.table;
                //執(zhí)行渲染
                table.render({
                    id: 'demo',
                    elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器）
                    , height: 315 //容器高度
                    , cols: [[{ checkbox: true }
                        , { field: 'DepartmentName', title: '單位名稱', width: 180, sort: true }
                        , { field: 'ISName', title: '信息系統(tǒng)名稱', width: 200, sort: true }
                        , { field: 'CloudType', title: '上云類別', width: 130, sort: true }
                        , { field: 'ContactPerson', title: '聯(lián)絡(luò)人', width: 130, sort: true }
                        , { field: 'ContactPhoneNumber', title: '聯(lián)絡(luò)人手機(jī)', width: 130 }
                        , { field: 'ApplyDate', title: '申請日期', width: 150, sort: true, templet: '#dateTpl' }
                        , { field: 'CloudState', title: '操作', width: 160, fixed: 'right', toolbar: '#barDemo' }
                    ]],
                    url: '/Order/GetTableData/',
                    where: { KeyWords: $("#keyword").val(), StartTime: startTime, EndTime: endTime },
                    method: 'post',
                    limits: [10, 20, 30, 50, 100]
                    , limit: 10, //默認(rèn)采用10
                    loading: true,
                    page: true
 
                });
                //監(jiān)聽工具條
                table.on('tool(demo)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'detail') {
                        layer.msg('ID：' + data.applyid + ' 的查看操作');
                    } else if (obj.event === 'del') {
                        layer.confirm('真的刪除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    } else if (obj.event === 'edit') {
                        layer.alert('編輯行：<br>' + JSON.stringify(data))
                    }
                });
 
            });
        } 
 
    </script>

我們先看看api中描述的異步請求數(shù)據(jù)需要的參數(shù)：

默認(rèn)傳遞的是page和limit ，可根據(jù)需要修改參數(shù)名，兩個參數(shù)分別為是我們傳統(tǒng)的頁碼和頁面大小。

where 是其他附加參數(shù)，根據(jù)前臺頁面的需要與否來選擇是否傳值。

在這里我修改了一下默認(rèn)值（在table.js文件中），將原有的page和limit修改為Start和Length：

以下為后臺Action 邏輯：

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

這里我們除了默認(rèn)的兩個參數(shù)以外還附加了三個參數(shù)，與前臺搜索框?qū)?yīng)，時間段比較特殊，是layui自帶的時間框，如下圖：

所以需要轉(zhuǎn)換一下以便于后臺篩選：

然后貼一下返回數(shù)據(jù)格式的代碼：

  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,//總條數(shù)
                data = seleResult,
                msg = ""
            };
 
            return result;
        }

這邊這個LayTableResult是根據(jù)頁面需要來自己定義的一個類，如下（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; }
 
    }

至此，所有的邏輯都寫完了，需要強(qiáng)調(diào)的一點是，當(dāng)你進(jìn)行條件篩選的時候應(yīng)該給搜索按鈕加個屬性

然后操作列是在外部綁定的html：

如果需要自定義列，使用LayUI框架自帶的模板語法，下圖是對申請日期列進(jìn)行一個時間的格式轉(zhuǎn)換：

效果圖：

關(guān)于layui創(chuàng)建table模塊的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。