LayUI数据表格的使用指南

result.put(“count”, page.getTotalElements());

result.put(“data”, page.getContent());

return result;

}

}

返回的JSON数据（只有返回的JSON数据格式一样数据就可以显示出来了）。

{

“msg”: “”,

“number”: 3,

“code”: 0,

“data”: [

{

“id”: 2,

“isUsed”: true,

“name”: “张三”,

“username”: “123456”,

“tbClass”: {

“id”: 1,

“name”: “软件工程1班”,

“teacher”: “张老师”

},

“grade”: 99.0

}, {

“id”: 3,

“isUsed”: null,

“name”: “刘备”,

“username”: “admin”,

“tbClass”: {

“id”: 1,

“name”: “软件工程1班”,

“teacher”: “张老师”

},

“grade”: null

}, {

“id”: 4,

“isUsed”: null,

“name”: “诸葛亮”,

“username”: “admin1”,

“tbClass”: {

“id”: 2,

“name”: “软件工程2班”,

“teacher”: “李老师”

},

“grade”: null

}

],

“count”: 3

}

数据返回后，就可以看到页面上显示的页面了。

上面是显示的单表数据，在实际开发中，常遇到关联表的数据显示。用以下方法可以显示关联表数据。

{field : ‘tbClass’, title : ‘班级’,

templet : function(d) { //d表格当前行的所有数据，如果班级对象不为空，就返回班级名称

return d.tbClass ? d.tbClass.name : ‘’;

}

},

数据显示完成后，下一步就是对数据的操作了（增删改查）。LayUI数据表格支持在表格上方自定义工具栏，也可以在每行后面定义操作按钮，先来看一下在表格上方定义工具栏。

定义增删改查工具栏代码。

注意：需要用script表格包裹起来，id用于绑定时使用，按钮上的lay-event属性用于监听按钮的操作。

之后在JS渲染代码中，通过toolbar属性绑定自定义的工具栏。

工具栏加载完成，页面显示。

工具栏添加后，可以通过以下方法，监听工具栏的点击事件，test为表格的id。

table.on(‘toolbar(test)’, function(obj){});

点击工具栏按钮，在控制台输出obj，可以发现，event的值，正是工具栏按钮中lay-event属性的值，可以通过他来判断点击的是哪个按钮，执行什么操作。

可以通过下面的代码获取