浅谈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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
浅谈python中的占位符
2017/11/09 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python opencv如何实现图片绘制
2020/01/19 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
五好关工委申报材料
2014/05/31 职场文书
银行稽核岗位职责
2015/04/13 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android