layui——表格问题

ゞ浴缸里的玫瑰 2022-05-12 13:28 341阅读 0赞

搜索问题：

$("#searchBtn").click(function () {
        //这里以搜索为例
        tableIns.reload({
            where: {"idCard":$("#idCard").val(),
                "phoneNum":$("#phoneNum").val(),
                "userName":$("#userName").val(),
                "type":$("#userSelect").val()}
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    });

注意：搜索为button标签，自带事件，不会完成重载，需要改为div

// 表格渲染
    var tableIns = table.render({
        elem: '#userTable'                  //指定原始表格元素选择器（推荐id选择器）
        , height: vipTable.getFullHeight()    //容器高度
        , cols: [[                  //标题栏
            {checkbox: true, sort: false, fixed: true, space: true}
            , {field: 'id', title: '序号', width: 80, type:'numbers'}
            , {field: 'type', title: '类型', width: 120}
            , {field: 'id', title: 'ID', width: 120}
            , {field: 'name', title: '用户名', width: 180}
            , {field: 'nickname', title: '昵称', width: 180}
            , {field: 'authority', title: '权限', width: 180}
            , {field: 'identityDocument', title: '身份证号', width: 180}
            , {field: 'phone', title: '手机', width: 180}
            , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
        ]]
        , id: 'dataCheck'
        , url: ipAddress + "admin/user/query"
        , method: 'get'
        , page: true
        , limits: [5, 10, 30, 50]
        , limit: 5 //默认采用30
        , loading: false
        , where: {"idCard":$("#idCard").val(),
            "phoneNum":$("#phoneNum").val(),
            "userName":$("#userName").val(),
            "type":$("#userSelect").val()}
        , done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            // console.log(res);
    
            //得到当前页码
            // console.log(curr);
    
            //得到数据总量
            // console.log(count);
        }
    });

接口返回的数据需要为以下格式：

\{ "code" : ""

,"msg" : ""

,"count" : ""

,"data" :\[\]

才会自动填入表格

data中的数据名需要跟表格的列的![70][]

一致

表格内数据判断后填写值：

{field: 'identityDocument', title: '身份证号', width: 180, templet: '#emptyIdCard'}

{field: 'type', title: '类型', width: 120, templet: '#userType'}

{ // 在表格对象cols属性中添加
        field: 'visible',
        title: '是否显示在单本古籍描述页面',
        unresize: true,
        filter: "isShow",
        sort: false,
        templet: function (d) {
            if (d.visible == 1 && d.necessary == 1) {
                return'<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="显示|隐藏">';
            } else {
                return'<input type="checkbox" name="close" lay-skin="switch" lay-text="显示|隐藏">';
            }
        }
    }

监听工具条：

<script type="text/html" id="barOption">
        <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
    </script>

table.on('tool(userEdit)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
    
        if(layEvent === 'detail'){ //查看
            //do somehing
        } else if(layEvent === 'del'){ //删除
            layer.confirm('确定删除该数据吗？', function(index){
                // 删除代码
                });
            });
        } else if(layEvent === 'edit'){ //编辑
    
        }
    });

点击增加向表格中加入一条数据

$("#addTable").click(function(){
        var data1={"LAY_TABLE_INDEX" : 5
                    ,"caption" : "分類"
                    ,"id" : 7
                    ,"isMain": 1
                    ,"name" : "分類"
                    ,"necessary" : 1
                    ,"visible" : 1};
        oldData.data.push(data1);
        table.reload('userTable',{
            data : oldData
        });
    });

如果 出现 Layui hint: The ID option was not found in the table instance 这个错误 需要在表格渲染时加入id字段

表格单元格 点击事件：

//监听单元格事件
    table.on('tool(userTable)', function(obj){
        if(obj.event === 'changeShow'){
            alert(1);
        }
    });

userTable为表格lay-filter的值，changeShow为单元格event的值

[70]: /images/20220504/7aaa3f6a5c434f3992d8a0fe65cdbc8d.png