layui中使⽤⾃定义数据格式对数据表格进⾏渲染1.引⼊
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
2.页⾯代码
<div class="layui-card-body">
<table class="layui-hide" id="permission-table" lay-filter="permission-table"></table>
<script type="text/html" id="permission-table-operate">
<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>
</div>
<script>
layui.use('table', function(){
var table = layui.table;
elem: '[lay-filter="permission-table"]',
url:'/permission/list.do',
where: {},
cellMinWidth: 80,
//table的全局配置
size: 'lg',
skin: 'line',
/
/每页显⽰的条数
limit: 10,
//是否显⽰加载条
loading: true,
//解析服务器端返回的数据
parseData: function (res) {
/*if (de == 500) {
return false
}*/
return {
"code": de,
"msg": res.msg,
"count": al,
"data": ws
};
},
//重新规定返回的数据格式
response: {
//数据状态的字段名称
statusName: 'code',
statusCode: 200,
msgName: 'msg', //状态信息的字段名称
dataName: 'data', //数据详情的字段名称
countName: 'count' //数据条数的字段名称，⽤于 table
},
cols: [[{
field:'id', width:80, title: 'ID', sort: true, fixed: 'left'},
{field:'permissionname', title: '权限名称'},
{field:'url', title: '资源路径'},
{align:'center', fixed: 'right', toolbar: '#permission-table-operate'}
]],
page: true
});
});
</script>
3.控制层
使⽤R类作为返回数据格式的载体，permissionService层使⽤mybatis-plus的分页功能查询列表。@Builder
@ToString
@AllArgsConstructor
public class R<T> implements Serializable {
@Getter
@Setter
private int code = 200;
@Getter
@Setter
private Object msg = "success";
@Getter
@Setter
private T data;
public R(T data) {
super();
this.data = data;
}
}
@RestController
@RequestMapping("/permission")
public class PermissionController extends BaseController {
@RequestMapping("/list.do")
public R findByPage(SysPermission permission, QueryPage queryPage) {
return new R<>(getData(permissionService.list(permission, queryPage)));
  }
public Map<String, Object> getData(IPage<?> page) {
Map<String, Object> data = new HashMap<>();
data.put("rows", Records());
data.put("total", Total());
return data;
}
}
4. 返回的数据
controller层返回的数据
R(code=200, msg=success,data={total=4, rows=
[SysPermission(id=1, permissionname=test111, url=/test111),
SysPermission(id=2, permissionname=test22, url=/test22),
SysPermission(id=3, permissionname=test33, url=/test33),
SysPermission(id=6, permissionname=test66, url=/test66)]})
页⾯接收到的数据
{"code":200,"msg":"success","data":{"total":4,"rows":
[{"id":1,"permissionname":"test111","url":"/test111"},
{"id":2,"permissionname":"test22","url":"/test22"},
layui框架怎么用
{"id":3,"permissionname":"test33","url":"/test33"},
{"id":6,"permissionname":"test66","url":"/test66"}]}} 5.渲染结果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。