浅谈layui分页控件field参数接收对象的问题


Posted in Javascript onSeptember 20, 2019

第一次使用layui分页控件,遇到的问题。。field: 'type.typeName' 获取不到值。

页面代码

table.render({
 elem: '#bookTable'
 ,height: 'full-20'     
 ,url: '/admin/getBook' //数据接口
 ,request: {
  pageName: 'begin' //页码的参数名称,默认:page
  ,limitName: 'length' //每页数据量的参数名,默认:limit
  }
 ,page: true //开启分页
 ,even: true
 ,cols: [[ //表头
  {checkbox: true, fixed: true}
  ,{field: 'bookid', title: 'ID', width:80, sort: true, fixed: 'left'}
  ,{field: 'bookname', title: '书名', width:250}
  ,{field: 'bookauthor', title: '作者', width:150}
  ,{field: 'bookpress', title: '出版社', width:150}
  ,{field: 'type', title: '类型', width:80}
  ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
 ]]
 ,id: 'bookReload'
 });

对应页面

浅谈layui分页控件field参数接收对象的问题

我想拿到type的中文名称,正常思路,我会把代码改成

,{field: 'type.typeName', title: '类型', width:80}

可是这样,获取不到值。

然后研究发现,field这个属性是根据后台实体类的getXXX()方法获取值的。

注意,实体类是List泛型对应的实体类。例如我这里是List<Book>,然后我就到我的Book.java中新增一个方法:

浅谈layui分页控件field参数接收对象的问题

最后我就可以到页面上获取typeName

,{field: 'typeName', title: '类型', width:80}

最后页面效果:

浅谈layui分页控件field参数接收对象的问题

以上这篇浅谈layui分页控件field参数接收对象的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
js实现录音上传功能
Nov 22 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 #Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 #Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 #Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 #Javascript
微信用户访问小程序的登录过程详解
Sep 20 #Javascript
解决layUI的页面显示不全的问题
Sep 20 #Javascript
小程序如何获取多个formId实现详解
Sep 20 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
Zend引擎的发展 [15]
2006/10/09 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
动态表格Table类的实现
2009/08/26 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
js实现抽奖效果
2017/03/27 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
jQuery 表单序列化实例代码
2017/06/11 jQuery
ionic 自定义弹框效果
2017/06/27 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
关于vue面试题汇总
2018/03/20 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
举例讲解Python中的算数运算符的用法
2015/05/13 Python
简单上手Python中装饰器的使用
2015/07/12 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python3个性签名设计实现代码
2018/06/19 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python 爬取疫情数据的源码
2020/02/09 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
2015年教师节主持词
2015/07/03 职场文书
公司业务员管理制度
2015/08/05 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
关于Vue中的options选项
2022/03/22 Vue.js