表格展示神器之一：layui表格

前言：在写后台管理系统中使用最多的就是表格数据展示了，使用表格组件能提高大量的开发效率，目前主流的数据表格组件有bootstrap table、layui table、easyUI table等.... 

博主个人比较倾向于layui，layui极简，却又不失饱满的内在，体积轻盈，组件丰盈。使用简单引用模块便捷，有丰富的扩展功能。

 

layui官网：

　　点击图片效果

　　　　

　　

 　　点击编辑

           

 

　　一、三种初始化渲染方式

　我先从最简单的初始化表格写起，如果我直接把全部代码帖出来，你们可能会看得头晕

　

1，方法渲染：

<table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>

 

 

var table = layui.table             ,form = layui.form;     layui.use('table', function () {  // 引入 table模块         table.render({             id:"dataTable",//             elem: '#layui_table_id',//指定表格元素             url: '/menu/menuList.ajax',  //请求路径             cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）          　//,even: true    //隔行换色            ,page: true  //开启分页             ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。             ,limit: 10 //每页默认显示的数量            ,method:'post'  //提交方式         　　,cols: [[                 {type:'checkbox'}, //开启多选框                 {                     field: 'menuId', //json对应的key                     title: 'ID',   //列名                     sort: true   // 默认为 false,true为开启排序                 }             ]]         });     });      

 java后台返回的json数据格式

{
code: 0, 
count: 8,  //总行数
data: [,…], //表格数据
msg: ""
}

 2，自动渲染方法 （以下代码由官方提供，自动渲染的方法 适合复杂行头时使用，一般建议使用上面的方法渲染）

关键字：