Résumé de l'utilisation courante du composant de table layui-Tutoriel Layui-php.cn

Résumé de l'utilisation courante du composant de table layui

la table est l'un des composants essentiels de layui. Il est utilisé pour exécuter une série de fonctions et d'opérations de données dynamiques sur des tables, couvrant presque tous les besoins impliqués dans les activités quotidiennes. Prend en charge les en-têtes fixes, les lignes fixes, la colonne fixe gauche/colonne droite, prend en charge le glisser pour modifier la largeur des colonnes, prend en charge le tri, prend en charge les en-têtes à plusieurs niveaux, prend en charge les modèles personnalisés pour les cellules et prend en charge la surcharge des tableaux (comme la recherche et le filtrage conditionnel), etc. ), prend en charge les cases à cocher, prend en charge la pagination, prend en charge l'édition de cellules et une série de fonctions.

Un exemple est compilé ci-dessous :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

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