layui实现数据表格自定义数据项


Posted in Javascript onOctober 26, 2019

layui是一个很适合后台开发人员用的一个前端框架,界面简洁,功能丰富。

大家知道,系统一般都有数据表格及分页功能,尤其在后台管理系统之类,这类场景更是很多,layui也为我们提供了对应的支持,我这里要说的是,layui对异步返回的数据默认是有一套格式的,像下面这样

{
 code: 0,
 msg: "",
 count: 1000,
 data: []
}

字段的别名我们可以通过属性去配置,详情请参考layui官方文档

重点来啦,layui默认支持一级数据结果,像下面这种服务端返回的数据结构是没办法解析到的

{
 code: 0,
 msg: "",
 page: {
 totalCount : 1,
 list : [
   {
   id : "1",
   name : "2"
   }
  ]
  }
}

对于这样的多层级数据结构是没办法获取的,那么如何解决呢?只有修改源码了

//table.js
t[r.countName]) 修改为t['page'][r.countName])
t[r.dataName] 修改为 t['page'][r.dataName])

其中 page为上一层级的名字,如果有更多层级,需要同步加上,修改完成之后,在页面上的使用可以按照layui的规范一样

以上这篇layui实现数据表格自定义数据项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JavaScript隐式类型转换
Mar 15 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
JavaScript中的高级函数
Jan 04 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 #Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 #Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 #Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
You might like
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
功能强大的php分页函数
2016/07/20 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Python字符编码判断方法分析
2016/07/01 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
python如何实现word批量转HTML
2020/09/30 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
关于环保的活动方案
2014/08/25 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL