layui数据表格

layui

html静态代码

  <table class="layui-table" lay-filter="useruv" id="demo">
  </table>

js后端

// 从api数据库获取数据，可以放在init（）函数外面
var time = new Date().getTime();
var header = {
        "X-APICloud-AppId": "A6056786505575",
        "X-APICloud-AppKey": sha1('A6056786505575'+'UZ'+'92559A05-497E-5C42-FC7E-91DA5AB3B599'+'UZ'+time)+'.'+time
};
var acdata;//下面会对回调数组进行一些更改，保存更改后的回调数据数组

下面获取数据的函数需要在init（）执行函数里执行并且layui.use嵌套在这个函数里面，否则会有卡顿或者不显示现象，目前为止没有想到好的解决方案

 // 获取列表数据
    var getData = function(){
        $.ajax({
            "type": "GET",
            //url需要用api数据库获取
            "url": "https://d.apicloud.com/mcm/api/Talent",
            "data": {
                "filter": {
                    "where": {},
                    "skip": 0 
                }
            },
            "headers": header
        }).done(function(data, status, header){
        //  console.log("data="+JSON.stringify(data));
        //对获取的数据进行一些调整弥补app考虑不周造成的数据库不全
        acdata=data;
        var i=0;
        for(;i<data.length;i++){
            if(acdata[i].Type==0){
                acdata[i].Check="未审核";
                    }
                }
        layui.use(['element','form','table'], function(){
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            form.render();
            // 展示已知数据
            // 表格初始化
            table.render({
                elem: '#demo'
                ,data: data
                ,cols: [[ //标题栏
                {checkbox: true, LAY_CHECKED: true} //默认全选
                ,{field: 'Name', title: '姓名', width: 140, sort: true,align:'center',}
                //field与数据库属性名对应
                //sort为是否排序，不写默认false
                //align:center字体居中
                ,{field: 'Job', title: '人才分类', width: 140,align:'center'}
                ,{field: 'Check', title: '审核状态', width: 140,align:'center'}
                ,{field: 'TracerName', title: '审核人', width: 140,align:'center'}
                ,{field: 'updatedAt', title: '更新日期', width: 300,align:'center',sort: true}
                //给表格添加操作按钮的位置，添加操作按钮的其他代码在下面
                ,{field:'right', title: '操作', width:137,toolbar:"#barDemo",align:'center'}
                ]] 
                ,skin: 'nob' //表格风格
                ,even: true
                ,page: true //是否显示分页
                ,limits: [5, 7, 10]
                ,limit: 5 //每页默认显示的数量
            });
        //复选框事件
            table.on('checkbox(useruv)', function(obj){
                console.log(1);
        });
});
}).fail(function(err){});
};

给表格添加此操作按钮

//放在table下面即可
<script type="text/html" id="barDemo">
//lay-event属性来区别不同按钮，需要特别注意
    <a class="layui-btn layui-btn-mini" lay-event="edit">查看</a>
</script>

    // js里面添加表格点击事件
        table.on('tool(useruv)', function(obj){
        //useruv与table的lay-filter属性对应
            var data = obj.data;
        //obj.event与该操作的lay-event属性相对应
            if(obj.event === 'edit'){
                window.location.href='#talentedit';
            }
        });