layui——表格问题

搜索问题：

$("#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中的数据名需要跟表格的列的

一致

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

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

<script type="text/html" id="emptyIdCard">
    {{#  if(d['identityDocument']){ }}
    {{ d['identityDocument'] }}
    {{#  } else { }}
    <span>未实名认证</span>
    {{#  } }}
</script>

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

<script type="text/html" id="userType">
    {{#  if(d['type'] == '0'){ }}
    注册用户
    {{#  } else if(d['type'] == '1'){ }}
    vip用户
    {{#  } else if(d['type'] == '2'){ }}
    管理员
    {{#  } }}
</script>

{ // 在表格对象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的值

layui——表格问题

猜你喜欢