layui官方文档https://www.layui.com/doc/modules/table.html#autoRender
数据表格的使用之方法渲染
<table id="demo" lay-filter="test" class="layui-table"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo'//对应的table的id
,url: '/listUsers' //数据接口
,page: false //开启分页
,cols: [[ //表头
{type: 'numbers', title: '编号'}
,{field: 'id', title: '用户id',hide:true}
,{field: 'account', title: '用户名'}
,{field: 'password', title: '密码'}
,{field: 'descMsg', title: '用户描述'}
,{field: 'islogin', title: '是否登录'}
,{field: 'lastlogintime', title: '最后登录时间'}
,{field: 'rId', title: '关联角色'}
,{field: 'fIds', title: '关联场站'}
,{title:'操作',align:'center', toolbar: '#barDemo'} //绑定toolbar,进行增删改查
]]
});
});
var table = layui.table;
table.on('tool(test)', function(obj){
//注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'del'){ //删除
deleteData(data.id);
} else if(layEvent === 'edit'){ //编辑
editData(data.id);
}
});
</script>
<script type="text/html" id="barDemo">
<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>
对应后台的数据格式
@GetMapping("/listUsers")
@ResponseBody
public JSONObject listUsers(ModelMap map) {
List<JSONObject> userList = new ArrayList<JSONObject>();
List<RsysUser> users = sysParamService.listUsers();
for(RsysUser user:users){
JSONObject obj = new JSONObject();
obj.put("id", user.getId());
obj.put("account", user.getAccount());
obj.put("password", user.getPassword());
obj.put("descMsg", user.getDescMsg());
obj.put("islogin", user.getIslogin());
obj.put("lastlogintime", user.getLastlogintime());
obj.put("rId", user.getrId());
obj.put("fType", user.getfType());
obj.put("fIds", user.getfIds());
userList.add(obj);
}
JSONObject obj = new JSONObject();
obj.put("code",0);
obj.put("msg","");
obj.put("data", userList);
if(null!=users&&!users.isEmpty()){
obj.put("count", users.size());
}else{
obj.put("count", 0);
}
return obj;
}
数据表格使用之自动渲染
farm为map形式时界面中的遍历方式
<table class="layui-table" lay-filter="parse-table-demo" hidden="true">
<thead>
<tr>
<th lay-data="{field:'index',width:60, }">序号</th>
<th lay-data="{field:'key' }">属性名</th>
<th lay-data="{field:'value' }">值</th>
</tr>
</thead>
<tbody>
<tr th:each="item,userStat:${farm}">
<td th:text="${userStat.index}+1"></td>
<td th:text="${userStat.current.key}"></td>
<td th:text="${userStat.current.value}"></td>
</tr>
</tbody>
</table>
var tempheight = (window.innerHeight-bottom-100)<400?400:(window.innerHeight-bottom-100);
layui.use('table', function() {
var table = layui.table;
var va = tempheight-20+'px';
table.init('parse-table-demo', { //转化静态表格
//width : 'full-200',
height : va,
limit: 96 //显示的数量
});
var tva = 200+'px';
table.init('parse-table-jk', { //转化静态表格
//width : 'full-200',
height : tva,
limit: 96 //显示的数量
});
});