浅谈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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 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与XML联手进行网站编程代码实例
2008/07/10 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
经典大学生求职信范文
2014/01/06 职场文书
预备党员思想汇报
2014/01/08 职场文书
会议接待欢迎词
2014/01/12 职场文书
交通安全横幅标语
2014/10/07 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
安全责任书
2015/01/29 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
毕业证明书
2015/06/19 职场文书