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; table.render({
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 (res.code == 500) {
return false
}*/
return {
"code": res.code,
"msg": res.msg,
"count": res.data.total,
"data": res.data.rows
};
},
//重新规定返回的数据格式
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", page.getRecords());
data.put("total", page.getTotal());
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"},
{"id":3,"permissionname":"test33","url":"/test33"},
{"id":6,"permissionname":"test66","url":"/test66"}]}}
5.渲染结果
layui中使用自定义数据格式对数据表格进行渲染的更多相关文章
- layui中的submit提交本地数据在控制在输出为空数组(解决)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层
最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...
- 记一次LayUI中Table动态添加列数据
这次在开发中遇到,有列数不固定的情况.废话不多说,先上图,在上代码. 下面上JS代码 function SearchData() { var dYear = $("#DYear") ...
- Layui使用心得(1)---- 数据表格
前端的框架我了解的不是太多,现在在用Layui的框架开发.之后准备转向Vue和React 这一系列博客主要讲一些我使用的Layui的常用组件的心得,官方的网站讲解已经很详细了,这里我只是结合我的实际使 ...
- layui中获取全部提交的数据
<form class="layui-form" action="">...........input textarea ......</fo ...
- 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义
一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...
- LayUI之table数据表格获取行、行高亮等相关操作
前言 目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
- 【JAVA】JSP+layui框架 静态表格转化成数据表格
<table lay-filter="demo" class="layui-table" id="excTable"> < ...
- jquery easy ui 1.3.4 数据表格(DataGrid)(8)
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
随机推荐
- HZOJ Silhouette
转化一下题意:给出矩阵每行每列的最大值,求满足条件的矩阵个数. 先将A,B按从大到小排序,显然没有什么影响.如果A的最大值不等于B的最大值那么无解否则一定有解. 考虑从大到小枚举A,B中出现的数s,那 ...
- TextView.setTextColor(int); 括号里那个颜色int值的理解
原本以为是R.id里的东西,后来发现不是 http://dianhua1990627.blog.163.com/blog/static/2755558820132262150387/
- 2019-8-31-dotnet-core-输出调试信息到-DebugView-软件
title author date CreateTime categories dotnet core 输出调试信息到 DebugView 软件 lindexi 2019-08-31 16:55:58 ...
- @loj - 3022@ 「CQOI2017」老 C 的方块
目录 @description@ @solution@ @accepted code@ @details@ @description@ 老 C 是个程序员. 作为一个懒惰的程序员,老 C 经常在电脑上 ...
- MySQL数据库优化(五)——MySQL查询优化
http://blog.csdn.net/daybreak1209/article/details/51638187 一.mysql查询类型(默认查询出所有数据列)1.内连接 默认多表关联 ...
- python基础之内置装饰器
装饰器 简介 功能与格式 内置装饰器 @classmethod @propertry @staticmethod 其它 ---------------------------------------- ...
- BERT大火却不懂Transformer?读这一篇就够了 原版 可视化机器学习 可视化神经网络 可视化深度学习
https://jalammar.github.io/illustrated-transformer/ The Illustrated Transformer Discussions: Hacker ...
- SuperSocket 服务管理器 (ServerManager)
什么 SuperSocket 服务管理器? SuperSocket 服务管理器是一个让你能够在客户中用图形化界面来管理和监控你的SuperSocket服务器程序的组件. 在服务器端配置服务器管理器 事 ...
- 【t065】最敏捷的机器人
Time Limit: 1 second Memory Limit: 128 MB [问题描述] [背景] Wind设计了很多机器人.但是它们都认为自己是最强的,于是,一场比赛开始了~ [问题描述] ...
- Java RandomAccessFile用法(转载)
RandomAccessFile RandomAccessFile是用来访问那些保存数据记录的文件的,你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必相同:但是其大小和位置必须 ...