hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui table组件罕见用法总结_WEB前端开发

2019-12-01后端开发ki4网17°c
A+ A-

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 ? 'checked' : '' }}>
    </script>
    <script>
        layui.use(['table','form'], function () {
            var table = layui.table;
            form = layui.form;
            //*******************************衬着表格**********************************
            table.render({
                //------------------------中心参数
                elem: '#myTable'                         //衬着的dom元素
                , url: '/Home/GetUserList'               //异步要求接口
                , page: true                             //开启分页
                , id: 'elementID'                        //容器唯一ID
                , cols: [[                               //列设置
                    { field: 'Id', title: '编号', sort: true, fixed: 'left' }
                    , { field: 'Name', title: '姓名' }
                    , { field: 'Age', title: '岁数' }
                    , { field: 'Role', title: '角色' }
                    , { field: 'CreateTime', title: '建立时候' }
                    , {
                        title: '自定义模板', width: 200
                        , templet: function (d) {
                            return  '姓名:<span style="color: #c00;">' + d.Name + '</span>'
                        }
                    }
                    , { field: 'IsAllow', title: '是不是运用', templet: '#allow', unresize: true, align: 'center' }
                    , { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }
                ]]

                //-----------------------------异步要求设置
                , method: 'post'                          //异步要求体式格局
                , headers: { hello: 'hengheng' }          //在request的header中增加数据
                , request: {                              //request设置,默许值以下
                    pageName: 'page',
                    limitName: 'limit'
                }
                , response: {                             //response设置,默许值以下
                    statusName: 'code'
                    , countName: 'count'
                    , dataName: 'data'
                    , msgName: 'msg'
                }
                , where: {                                //向背景增加的分外参数
                    nameParm: 'u',
                    roleParm: 'o'
                }
                //-----------------------加载的其他选项
                , done: function (res, curr, count) {
                    //res为接口返回的数据、count为数据总长度
                    console.log(res);
                    console.log(curr);
                    console.log(count);
                }
                , text: {
                    none: '暂无相干数据'                   //默许:无数据。
                }
                , initSort: {
                    field: 'Id'                           //排序字段为Id
                    , type: 'desc'                        //排序体式格局  asc: 升序、desc: 降序、null: 默许排序
                }
            })

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

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

                if (layEvent === 'edit') {
                    var id = data.Id;
                    layer.open({
                        type: 2
                        , title: '修正'                   //标题栏
                        , scrollbar: false
                        , area: ['400px', '300px']
                        , shade: 0.5
                        , id: 'layerId'                  //设定一个id,防备反复弹出
                        , moveType: 1                    //拖拽形式,0或许1
                        , content: '/Home/EditUserInfo?id=' + id
                    });
                } else if (layEvent === 'del') {
                    layer.confirm('真的删除吗?', 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('elementID');
                            } else {
                                layer.msg(result.Msg);
                                table.reload('elementID');
                            }
                        })
                    });
                }
            });

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

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

更多layui学问请关注layui运用教程栏目。

以上就是layui table组件罕见用法总结的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui table组件罕见用法总结_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>