Heim >Web-Frontend >Layui-Tutorial >Zusammenfassung der allgemeinen Verwendung der Laui-Tabellenkomponente

Zusammenfassung der allgemeinen Verwendung der Laui-Tabellenkomponente

尚nach vorne: 2019-11-30 13:52:053591Durchsuche

Tabelle ist eine der Kernkomponenten von Laui. Es wird zur Ausführung einer Reihe von Funktionen und dynamischen Datenoperationen an Tabellen verwendet und deckt nahezu alle Anforderungen im Tagesgeschäft ab. Unterstützt feste Überschriften, feste Zeilen, feste Spalte links/Spalte rechts, unterstützt das Ziehen zum Ändern der Spaltenbreite, unterstützt die Sortierung, unterstützt mehrstufige Überschriften, unterstützt benutzerdefinierte Vorlagen für Zellen und unterstützt das Überladen von Tabellen (z. B. Suche und bedingte Filterung) usw. ), unterstützt Kontrollkästchen, unterstützt Paging, unterstützt die Zellenbearbeitung und eine Reihe von Funktionen.

Ein Beispiel ist unten zusammengestellt:

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

Für mehr Laui-Wissen beachten Sie bitte die Spalte Tutorial zur Verwendung von Laui.

Das obige ist der detaillierte Inhalt vonZusammenfassung der allgemeinen Verwendung der Laui-Tabellenkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

layui table

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Zusammenfassung der allgemeinen Verwendung der Laui-Laypage-KomponenteNächster Artikel：Zusammenfassung der allgemeinen Verwendung der Laui-Laypage-Komponente

In Verbindung stehende Artikel

Mehr sehen