layui table元件常見用法總結-Layui教程-PHP中文網

首頁

web前端

Layui教程

layui table元件常見用法總結

尚

Nov 30, 2019 pm 01:52 PM

layui

layui table元件常見用法總結

table是 layui 最核心的組成之一。它用於對表格進行一些列功能和動態化資料操作，涵蓋了日常業務所涉及的幾乎全部需求。支援固定表頭、固定行、固定列左/列右，支援拖曳改變列寬度，支援排序，支援多層表頭，支援儲存格的自訂模板，支援對錶格重載（例如搜尋、條件篩選等），支援複選框，支援分頁，支援單元格編輯等等一些列功能。

下邊整理了一個例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>layer学习</title>
    <link href="/Content/mycss.css" rel="stylesheet" />
    <link href="/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="/Content/layui/layui.js"></script>
</head>
<body>
    <!--表格-->
    <div id="myTable" lay-filter="test"></div>
    <!--工具栏-->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="allow">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"  {{ d.IsAllow == true ? &#39;checked&#39; : &#39;&#39; }}>
    </script>
    <script>
        layui.use([&#39;table&#39;,&#39;form&#39;], function () {
            var table = layui.table;
            form = layui.form;
            //*******************************渲染表格**********************************
            table.render({
                //------------------------核心参数
                elem: &#39;#myTable&#39;                         //渲染的dom元素
                , url: &#39;/Home/GetUserList&#39;               //异步请求接口
                , page: true                             //开启分页
                , id: &#39;elementID&#39;                        //容器唯一ID
                , cols: [[                               //列设置
                    { field: &#39;Id&#39;, title: &#39;编号&#39;, sort: true, fixed: &#39;left&#39; }
                    , { field: &#39;Name&#39;, title: &#39;姓名&#39; }
                    , { field: &#39;Age&#39;, title: &#39;年龄&#39; }
                    , { field: &#39;Role&#39;, title: &#39;角色&#39; }
                    , { field: &#39;CreateTime&#39;, title: &#39;创建时间&#39; }
                    , {
                        title: &#39;自定义模板&#39;, width: 200
                        , templet: function (d) {
                            return  &#39;姓名：<span style="color: #c00;">&#39; + d.Name + &#39;</span>&#39;
                        }
                    }
                    , { field: &#39;IsAllow&#39;, title: &#39;是否使用&#39;, templet: &#39;#allow&#39;, unresize: true, align: &#39;center&#39; }
                    , { fixed: &#39;right&#39;, width: 150, align: &#39;center&#39;, toolbar: &#39;#barDemo&#39; }
                ]]

                //-----------------------------异步请求设置
                , method: &#39;post&#39;                          //异步请求方式
                , headers: { hello: &#39;hengheng&#39; }          //在request的header中添加数据
                , request: {                              //request设置，默认值如下
                    pageName: &#39;page&#39;,
                    limitName: &#39;limit&#39;
                }
                , response: {                             //response设置，默认值如下
                    statusName: &#39;code&#39;
                    , countName: &#39;count&#39;
                    , dataName: &#39;data&#39;
                    , msgName: &#39;msg&#39;
                }
                , where: {                                //向后台添加的额外参数
                    nameParm: &#39;u&#39;,
                    roleParm: &#39;o&#39;
                }
                //-----------------------加载的其他选项
                , done: function (res, curr, count) {
                    //res为接口返回的数据、count为数据总长度
                    console.log(res);
                    console.log(curr);
                    console.log(count);
                }
                , text: {
                    none: &#39;暂无相关数据&#39;                   //默认：无数据。
                }
                , initSort: {
                    field: &#39;Id&#39;                           //排序字段为Id
                    , type: &#39;desc&#39;                        //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
            })

            //*******************************监听表格**********************************

            table.on(&#39;tool(test)&#39;, function (obj) {        //test为lay-filter值
                var data = obj.data;                       //获得当前行数据
                var layEvent = obj.event;                  //获得 lay-event
                var tr = obj.tr;                           //获得当前行 tr 的DOM对象

                if (layEvent === &#39;edit&#39;) {
                    var id = data.Id;
                    layer.open({
                        type: 2
                        , title: &#39;修改&#39;                   //标题栏
                        , scrollbar: false
                        , area: [&#39;400px&#39;, &#39;300px&#39;]
                        , shade: 0.5
                        , id: &#39;layerId&#39;                  //设定一个id，防止重复弹出
                        , moveType: 1                    //拖拽模式，0或者1
                        , content: &#39;/Home/EditUserInfo?id=&#39; + id
                    });
                } else if (layEvent === &#39;del&#39;) {
                    layer.confirm(&#39;真的删除吗？&#39;, function (index) {
                        obj.del();                            //删除对应行（tr）的DOM结构
                        layer.close(index);
                        var id = data.Id;                     //向服务端发送删除指令
                        $.post("/Home/DeleteUserInfo", { "id": id }, function (result) {
                            if (result.IsSuccess === 1) {
                                layer.msg(result.Msg);
                                table.reload(&#39;elementID&#39;);
                            } else {
                                layer.msg(result.Msg);
                                table.reload(&#39;elementID&#39;);
                            }
                        })
                    });
                }
            });

            //*******************************监听checkbox********************************
            //监听操作----置顶
            form.on(&#39;checkbox(allowSetFilter)&#39;, function (obj) {
                var pre = {
                    "Id": this.name,
                    "IsAllow": obj.elem.checked
                };
               //alert(this.name+&#39;----&#39;+obj.elem.checked);
                $.post(&#39;/Home/SetAllow&#39;, pre, function (result) {
                    if (result.IsSuccess === 1) {
                        layer.msg(result.msg)
                    } else {
                        layer.msg(result.msg)
                    }
                })
            });

        });
    </script>
</body>
</html>

登入後複製

更多layui知識請關注layui使用教程欄目。

以上是layui table元件常見用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1663

CakePHP 教程

1420

Laravel 教程

1313

PHP教程

1266

C# 教程

1237

Related knowledge

layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟：新增跳轉代碼：在登入表單提交按鈕點選事件中新增判斷，成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置：在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段，name 為 "redirect"，value 為目標頁面位址。

layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法，包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數，以及監聽表單提交事件獲取資料。

layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素，提供預製元件簡化頁面建置；而Vue則是全端框架，注重資料綁定、元件化開發和狀態管理，更適合建構複雜應用程式。 layui學習簡單，適合快速建立頁面；Vue學習曲線陡峭，但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平，可以選擇合適的框架。

layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能，可以實現自適應佈局。步驟包括：引用layui框架。定義自適應佈局容器，設定layui-container類別。使用響應式斷點（xs/sm/md/lg）隱藏特定斷點下的元素。利用網格系統（layui-col-）指定元素寬度。透過偏移量（layui-offset-）建立間距。使用響應式實用工具（layui-invisible/show/block/inline）控制元素的可見性和顯示方式。

layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下：使用 Ajax：建立請求對象，設定請求參數（URL、方法、資料），處理回應。使用內建方法：使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架，提供了一套易用的UI元件和工具，幫助開發者快速建立響應式網路應用程式。其特點包括：模組化、輕量級、響應式，並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便，缺點是客製化較差、技術更新較慢。