最近项目里使用了layui table
收集一下坑
1.使用layui table 建立多级表头表格
要建立多层级的表格主要通过cols:{ }的多层级数据进行构造。
根据表格文档可以知道：
,cols: [
[{
unresize:true,field: 'number',title: '序号',width: "3%",
align:'center',switchable:false,align: 'center',valign: 'middle',
colspan: 1,rowspan: 2,
// sort:true,
// templet: '#xuhao'
},
{field : 'REGION_NAME',title : '区局', width : "4%",align: 'center',
valign: 'middle', colspan: 1, rowspan: 2, unresize:true,
},
{field : 'REGION_other',title : '其他', width : "4%",align: 'center',
valign: 'middle', colspan: 2, rowspan: 1, unresize:true,
}],
[
{field : 'REGION_other1',title : '其他1', width : "4%",align: 'center',
valign: 'middle', unresize:true,
} ,
{field : 'REGION_other2',title : '其他2', width : "4%",align: 'center',
valign: 'middle', unresize:true,
}
]
]以上是生成一个 序号 区局 [上表头]其他 [下表头]其他1，其他2 的一个表头。
这里的colspan和rowspan要用在第一层表头上（如果有两层表头）
colspan：1 rowspan：2 表示该表头占一列两行的位置
第二层表头不写col和row，会自动补齐到第一行空出来的位置。以此写多级表头。
2.再研究一下数据表格的详细参数（重点！）：
table.render({
elem: '#demo'
，skin: 'nob'
,height: 312
,url: '/demo/table/user/' //数据接口
,method : 'post'
,contentType : "application/x-www-form-urlencoded; charset=UTF-8"
,request:{
pageName: 'pageNumber' //页码的参数名称，默认：page
,limitName: 'pageSize' //每页数据量的参数名，默认：limit
}
,where:{
//name:'wj'
//,id:'111'//这里填需要携带的参数
},
,response: {
statusName: 'status'
,status:null
,statusCode:null//规定成功的状态码，默认：0
,countName: 'total' //规定数据总数的字段名称，默认：count
,dataName: 'rows' //规定数据列表的字段名称，默认：data
}
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
]]
});
});如上：
elem要写的是表格的id名（可以用class名但是不建议）
skin为表格风格，nob是无边框
url是接口 ，method则可以指定方法，默认是get，我这里用的post
request 可以指定默认参数的名字
layui的table自带两个默认参数，为page,limit用于分页，如果需要更改则要在request里修改
当要携带的参数不止page,limit的时候，这时候则要使用where:{ }
（一开始没看到官方文档的where，在request里踩了好久的坑）
where:{ name:'wj',id:'111' },可以任意添加除了page和limit以外的参数
这里详细讲一下response！！
,response: {
statusName: 'status'
,status:null
,statusCode:null//规定成功的状态码，默认：0
,countName: 'total' //规定数据总数的字段名称，默认：count
,dataName: 'rows' //规定数据列表的字段名称，默认：data
}在我实际操作的时候，接口调通的情况下表格一直提示，数据异常，status应该为200，当我改成status200的时候，status又提示应该为0，而当我改成0的时候，情况依然一直往复，拿不到数据，
当我检查的时候才发现，是后台返回的接口数据里根本没有判断成功的code这个字段！！！,所以，这时候把status改为null，就可以正常显示数据.
3.关于业务要求，需要用到的自定义模板进行表格改造
关于自定义模板，在表格这一块还是很好用的，但是就是写js比较麻烦，所用到的{{ }}出奇的多
所以建议先写好js，然后逐行添加{{ }}。{{d.name}},模板里的d指的是当前返回的数据的data，
data下的name,为d.name.
首先是在cols:{ }里的当前需要添加序号的表头写上属性 templet: '模板id名'
例如：templet: '#xuhao'
（1）添加首行序号
<script type="text/html" id="xuhao">
{{d.LAY_TABLE_INDEX+1}}
</script>如果是开启了分页，并且想要所有的数据都进行序号+1，则可以在col{ }表头里添加属性： type:'numbers' 则可以实现该效果。
（2）数据为空时不显示undefined，显示' 暂无数据'
效果如图：
<script type="text/html" id="std">
{{#
var fn = function(){
return '暂无数据';};
}}
{{# var xxx = d.name }}
{{# if(xxx!=null){ }}
{{ d.name}}
{{# } else { }}
{{ fn() }}
{{# } }}
</script>(3) 当前表格点击 查看 跳转到新页面并且携带相应数据
具体内容涉及项目，只展示一下点击跳转的模板，
可以通过onclick绑定事件
如图所示：
这是一条数据
<script type="text/html" id="sbxq">
< a href='{{=d.GISID}}'>查看</ a>
</script>4.说一说table里最头疼的一个坑排序BUG！
数据排序异常问题
项目里需要使用排序，所以直接在cols{ }里的表头添加sort:true，即可开启排序。
对于排序规则，一般是从大到小，从小到大，
但是实际使用的过程中，出现了一个排序异常问题！！
b话少说，我先放图：
当我点击排序时，这个9.79出现在第二列。
倒序也是有这个问题。
遇到这个问题之后，第一反应是检查数据，发现console打印的数据是没问题的，
第二反应是去看官方文档，官方文档都是整数。也没有相关的问题和解决方法
我大胆的猜想是不是由于小数点的问题。这里可能涉及数据结构的问题。
于是我尝试着使用模板进行当前数据*100再用math取整。然后当我全是整数的时候
这行数据依然异常排序。
于是开始了漫长的百度之旅，然而并没有效果。
最后向后台沟通，这个数据尝试在后台进行*100再取整，最后我前端再/100（也可以让后端/100，但是我怕小数又出问题）。
大功告成。
个人原创踩坑，转载需要注明出处噢。
