浅谈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 相关文章推荐
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
Openlayers实现距离面积测量
Sep 28 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
PHP 日期加减的类,很不错
2009/10/10 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python描述器descriptor详解
2015/02/03 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python反转列表的三种方式解析
2019/11/08 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
Python wordcloud库安装方法总结
2020/12/31 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
药品质量检测应届生求职信
2013/11/14 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
优秀护士事迹材料
2014/12/25 职场文书
数学教师个人工作总结
2015/02/06 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
2015年工程师工作总结
2015/04/30 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
爱护环境建议书
2015/09/14 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书