浅谈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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
用js编写留言板
Mar 17 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
实现Python与STM32通信方式
2019/12/18 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
父母寄语大全
2014/04/12 职场文书
机械工程师岗位职责
2014/06/16 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript