table-layui

本文章为原创文章，转载请注明出处

html

<div class="layui-btn-group tableBtn">
            <button class="layui-btn" data-type="add">添加</button>
        </div>
        <table class="layui-table" id="tableData" lay-filter="tableData"></table>

toolbar操作按钮

<script type="text/html" id="operationBtn">
                <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>

数据绑定

function initTable(){
                //tableIns存储table.render()方法返回的对象，以便重载table时使用
                tableIns = table.render({
                    elem: '#tableData' //对应table的id (table 容器的选择器或 DOM)
                    ,url:'/UserInfo/GetData' //请求路径
                    ,method:'post'  //请求方式 ，默认get
                    ,page:true  //是否启用分页
                    ,cellMinWidth: 50 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,cols: [[
                        {type:'checkbox'}
                        ,{field:'ID', title: 'ID',align:'center', sort: true}
                        ,{field:'Sex', title: '性别',align:'center', sort: true,templet:function(row){//处理特殊数据自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数，包含接口返回的所有字段和数据
                            if(row.Sex) return '男';
                            return '女';
                        }} //
                        ,{field:'Autograph', title: '签名', minWidth: 100,align:'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{toolbar:'#operationBtn',title:'操作',align:'center'} //绑定列工具条。设定后，可在每行列中出现一些自定义的操作性按钮 operationBtn对应的是上面的toolbar操作按钮
                    ]] //设置表头
                    ,limits:[30,60,90] //每页条数的选择项，默认 [10,20,30,40,50,60,70,80,90]
                    ,limit:30 //每页显示的条数，默认：10
                });
            }

按钮的对应事件写法

var $ = layui.$, active = {
                add: function(){ //add 是添加按钮data-type的值
                    //do something
                }
            };
            //调用tableBtn对应的active事件
             $('.tableBtn .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

操作按钮事件

//监听工具条 `table.on('event(filter)', callback);` event为内置事件名，filter为容器lay-filter设定的值
                table.on('tool(tableData)', function(obj){
                    var data = obj.data;
                    //删除
                    if(obj.event === 'del'){
                        layer.confirm('确定删除吗', function(index){
                            //do something 点击确定时执行该处代码
                        });
                    } else if(obj.event === 'edit'){
                        //do something
                    }
                });

table重载

//table重载
            function reload(){
                tableIns.reload();//此处的tableIns就是渲染table时的返回值
            }

分页条

page:true开启分页条

页码默认参数：page

每页条数默认参数：limit

自定义配置参数

request: {
            pageName: 'curr', //页码的参数名称，默认：page
            limitName: 'nums' //每页数据量的参数名，默认：limit
        }

自定义数据格式

response: {
        statusName: 'status', //数据状态的字段名称，默认：code
        statusCode: 200, //成功的状态码，默认：0
        msgName: 'hint', //状态信息的字段名称，默认：msg
        countName: 'total', //数据总数的字段名称，默认：count
        dataName: 'rows', //数据列表的字段名称，默认：data
    }   

自定义后台返回数据格式（上述）

{
            status: 200,
            hint: "",
            total: 1000,
            rows: []
        } 

默认接受数据格式

{
            code: 0,
            msg: "",
            count: 1000,
            data: []
        } 

更多table操作请参考 http://www.layui.com/doc/modules/table.html