記錄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 //顯示的數量
		});
	});