【归纳】Layui table.render里的json后台传入
在使用Layui的table元素时,传入的json的数据格式是有其自身定义的,需要另外添加一些字符,以正确传入。
为了传入符合前端格式的数据:
table.render({
elem: '#test'
,url:'http://localhost:8080/pictures'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [
[
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
,{field: 'picname', title: '名字', width:200}
,{field: 'character', title: '属性', width:150}
,{field: 'home', title: '栖息地', width: 200}
,{field: 'url', title: 'url', width: 300}
,{fixed: 'right', title: '操作',width: 165, align:'center', toolbar: '#barDemo'}
]
]
,page: true
});
在entity层,使用了transient 修饰符对字段进行限定:
@Data
@AllArgsConstructor
@NoArgsConstructor
@Entity(name="picture")
public class Picture {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id")
private Long id;
@Column(name = "picname")
private String picname;
@Column(name = "type")
private transient String type;
@Column(name = "url")
private String url; @Column(name = "userid")
private transient Long userid;
@Column(name = "englishname")
private transient String englishname;
@Column(name = "character")
private String character;
@Column(name = "home")
private String home;
}
在传入中,为了满足Layui的格式要求,加上了一些头部:code、msg、count、data
@RequestMapping("pictures")
public String getPictures(HttpSession session){
User user=(User)session.getAttribute("user");
Long userid=user.getId();
List<Picture> pictures;
if(userid==1)
pictures=picService.getAllPicture();
else
pictures=picMapper.getPicbyUserid(userid);
String picstring=gson.toJson(pictures);
log.info(" 序列化结果:" + "{ \"code\": 0, \"msg\": \"\",\"count\": 15,\"data\": "+picstring+"}");
picstring="{ \"code\": 0, \"msg\": \"\",\"count\": 10,\"data\": "+picstring+"}";
return picstring;
}
最终成功传入,显示:

【归纳】Layui table.render里的json后台传入的更多相关文章
- layui之table.render使用(含后台详细代码实现)
效果图如下: 前端实现代码如图(完整代码): <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- layui.table前端+后台处理+分页
前端 注:监听工具条没有详细写,但路子一样的 @section head{ <script src="~/Content/jquery-easyui-1.5.5.4/jquery.ea ...
- layui 学习笔记一:layui table 查询、新增、编辑、删除
一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...
- layui table 分页 记住之前勾选的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- layui table表格详解
上次做table有些东西 忘记了 这次当作来个分析总结一下 跟大家共同学习 闲话不多说 直接上例子 代码: <form id="form1" runat="s ...
- 数据表格 layui.table
layui官网-表单 自动渲染 方法渲染 table.render,cols中的field是后台传递的data map.put("data",stuService.selectSt ...
- LayUI+SSM实现一个简单的后台管理系统
该后台管理系统是用于管理视频网站数据的,目前分5个菜单项,这篇博客主要讲述[影片管理]的具体功能和实现 后台代码结构和[影片管理]的界面如下图 该界面分为上下2部分,[搜索条件]和[影片列表],2部分 ...
- layui table数据表格reload where参数保留问题
layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...
- Layui table 组件的使用:初始化加载数据、数据刷新表格、传参数
背景 笔者之前一直使用 bootstrap table ,因为当前项目中主要使用 Layui 框架,于是也就随了 Layui table ,只是在使用的时候出现了一些问题,当然也是怪自己不熟悉的锅吧! ...
随机推荐
- 在google chrome浏览器上安装 Vue Devtools工具
[转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...
- P1199三国游戏
众所周知,三国题材的游戏很多,小涵遇到了其中之一 传送 这个题显然用贪心做,但是怎么贪心? 首先我们只知道计算机的策略,但我们不知道小涵的策略.所以我们要想小涵是怎么挑的. 计算机的策略是拆掉你每次选 ...
- docker 保存镜像 加载镜像
1.保存镜像 docker save -o 保存的文件名 来源镜像 2.加载镜像 docker load -i 保存的文件名
- Linux_Bash常用脚本
目录 目录 从用户列表中过滤用户名并创建用户 awktrcut 指令的文本处理 tr指令 cut指令 awk指令 备份文件 测试LFTPServer权限设定 开启Httpd 安装Httpd 批量创建用 ...
- vue.jsc初体验
Vue 1.安装脚手架 (1)npm install -g vue-cli (2)Vue -v //查看是否安装成功 (3)Vue init webpack name(名称) (4)Npm insta ...
- PHP 调试 - 方式
之前学 Java 的时候,一直使用 IDE 的 console 控制台进行调试.后来搞 PHP 后,习惯在代码里面 echo 和 exit,然后在浏览器刷新看效果,把单步调试.变量值查看等常用的调试方 ...
- python实现自动发送邮件
Python发送邮件成功的前提,应是先开启授权码.目前使用广泛的邮箱有:163邮箱.qq邮箱等. 163邮箱开启授权码的方法如下图: qq邮箱开启授权码的方法如下图: 接下来代码的实现: import ...
- msyql join语句执行原理
首先,我建了一个表t2,里面有1000条数据,有id,a,b三个字段,a字段加了索引 然后我又建立一个t1表,里面有100条数据,和t2表的前一百条数据一致,也是只有id,a,b三个字段,a字段加了索 ...
- HashMap -双列集合的遍历与常用的方法
package cn.learn.Map; /* java.util.Hashtable<k,y> implements Map<k,v> 早期双列集合,jdk1.0开始 同步 ...
- MySQL格式化时间戳 统计当日,第二天,第三天,3个工作日以后的数据
mysql 查询出来的处理时间和开始时间都是13位的时间戳 SELECT `END_TIME`,`CREATE_TIME` FROM t_table 需求是统计当日,第二天,第三天,3个工作日以后的时 ...