layui数据表格使用（通过传递Map或json对象)
本文只是说明最基本的用法——把数据遍历出来。（我做了好久，只能这样记录学习了。。。）
总结：传值只要是键值对的形式就可以，无论是map对象，还是各种json对象，都可以被layui识别。
后台代码如下
①map对象：
//java
@Controller
public class UserListServlet {
@GetMapping("/manage/admin_userListServlet")
@ResponseBody
public Map<String, Object> userList(){
UserDAO userDAO=new UserDAO();
List<User> list = userDAO.selectAll();
Map<String, Object> result = new HashMap<String, Object>();
result.put("code", 0);
result.put("msg", "");
result.put("count",1000);
result.put("data", list);
return result;
}
}
<!-- html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="../layui/layui.js" charset="UTF-8"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/manage/admin_userListServlet' //数据接口
,page: true //开启分页
,cols: [[ //表头
{
type: "checkbox", fixed:"left", width:50},
{
field: 'id', title: 'id', minWidth:100, align:"center"},
{
field: 'username', title: '用户名', minWidth:100, align:"center"},
{
field: 'mobile', title: '电话', minWidth:100, align:"center"},
{
field: 'address', title: '地址', minWidth:100, align:"center"},
]]
});
});
</script>
</body>
</html>
②json对象
//代码太多了，不过重点是看传入形式
@RequestMapping("getDictionary")
@ResponseBody
public LayuiJson getDictionary(Integer parentId) {
LayuiJson json = new LayuiJson();
if (parentId==null||parentId==0) {
parentId = -1;
}
List<Map<String, Object>> list = minSpanTreeService.getDictionary(parentId);
json.setData(list);
return json;
}
layui.use(['admin','element', 'tree', 'layer', 'form', 'upload', 'treeGrid'], function () {
var $ = layui.jquery, tree = layui.tree;
var table = layui.table;
var treeGrid = layui.treeGrid; //很重要
var admin = layui.admin;
var view = layui.view;
var form = layui.form;
treeTable = treeGrid.render({
url:'minSpanTree/getDictionary'
,elem: '#lay_data_list'
, cellMinWidth: 100
, treeId: 'id'//树形id字段名称
, treeUpId: 'parentId'//树形父id字段名称
, treeShowName: 'id'//以树形式显示的字段
, cols: [[
{
type: 'checkbox'}
/*,{fixed: '',title: '序号',width:'5%',templet: '#number'}*/
, {
field: 'id', width: '20%', title: '结点id'}
, {
field: 'typename', width: '20%', title: '名称'}
, {
field: 'value', width: '20%', title: '数值'}
, {
field: 'xco', width: '20%', title: 'x坐标'}
, {
field: 'yco', width: '20%', title: 'y坐标'}
]]
,done: function(res, curr, count){
var response = layui.setter.response;
//登录状态失效，清除本地 access_token，并强制跳转到登入页
if(res[response.statusName] == response.statusCode.logout){
view.exit();
}
}
, page: false
,id:'lay_data_list'
,height: 'full-150'
,where: {
//通过 request 头传递
access_token: layui.data('layuiAdmin').access_token
}
});