layui表格日常使用

目录

1.数据表格(form)  

1.1表头属性

1.2表格属性

1.3 相关事件的监听

1.3.1 监听头部工具栏的事件

1.3.2监听复选框的表格

1.3.3监听单元格编辑

1.3.4 监听行单击事件

1.3.5监听行双击事件

1.3.6监听行工具事件

1.4相关方法

1.4.1获取选中行的值

1.4.2表格重载


 

1.数据表格(form)  

准备Json,可以读取 json文件(乱码未解决),也可以直接传入数据data.

1.1表头属性

field:和数据接口里面的data[{"id":1}]的key映射

title:表头的内容

width:宽度

hide:true 是否隐藏

sort:true 是否开启列排序

edit:true 是否支持编辑

align:'center' 内容对齐方式 left center right

templet:function(d){

return d.sex=='男'?'汉子':'妹子';

}}

totalRowText:"合计" 合计行的文本 前提是表格开启合并行

totalRow:true 是否合计前提是表格开启合并行

toolbar: '#userBar' 引入行的工具栏

1.2表格属性

layui表格日常使用

1.3 相关事件的监听

1.3.1 监听头部工具栏的事件

layui表格日常使用

layui表格日常使用

layui表格日常使用

1.3.2监听复选框的表格

layui表格日常使用

1.3.3监听单元格编辑

前提单元必须可以编辑

layui表格日常使用

layui表格日常使用

1.3.4 监听行单击事件

layui表格日常使用

1.3.5监听行双击事件

layui表格日常使用

1.3.6监听行工具事件

layui表格日常使用

layui表格日常使用

1.4相关方法

1.4.1获取选中行的值

layui表格日常使用

1.4.2表格重载

layui表格日常使用