浅谈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 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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提取中文首字母
2008/04/09 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
js DOM的学习笔记
2011/12/22 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
解析vue中的$mount
2017/12/21 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
Vue程序调试的方法
2019/06/17 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python的json包位置及用法总结
2020/06/21 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
师范大学应届生求职信
2013/11/21 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
继承公证书格式
2015/01/26 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年科室工作总结
2015/04/10 职场文书
人生遥控器观后感
2015/06/11 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL