layui中如何創建table

layui中如何創建table，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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('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];//結束時間            }            layui.use('table', function () {                var table = layui.table;                //執行渲染                table.render({                    id: 'demo',                    elem: '#demo' //指定原始表格元素選擇器（推薦id選擇器）                    , height: 315 //容器高度                    , cols: [[{ checkbox: true }                        , { field: 'DepartmentName', title: '單位名稱', width: 180, sort: true }                        , { field: 'ISName', title: '信息系統名稱', width: 200, sort: true }                        , { field: 'CloudType', title: '上云類別', width: 130, sort: true }                        , { field: 'ContactPerson', title: '聯絡人', width: 130, sort: true }                        , { field: 'ContactPhoneNumber', title: '聯絡人手機', 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, //默認采用10                    loading: true,                    page: true                 });                //監聽工具條                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中描述的異步請求數據需要的參數：

默認傳遞的是page和limit ，可根據需要修改參數名，兩個參數分別為是我們傳統的頁碼和頁面大小。

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

在這里我修改了一下默認值（在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);        }

這里我們除了默認的兩個參數以外還附加了三個參數，與前臺搜索框對應，時間段比較特殊，是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中如何創建table問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。