记录layui使用之数据表格

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 //显示的数量
		});
	});