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 相关文章推荐
jQuery trigger()方法用法介绍
Jan 13 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
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读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php下拉选项的批量操作的实现代码
2013/10/14 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php 常用的系统函数
2017/02/07 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
jQuery技巧总结
2011/01/01 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
详解Node.Js如何处理post数据
2016/09/19 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
JS实现放烟花效果
2020/03/10 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python实现简单字典树的方法
2016/04/29 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
python 自动去除空行的实例
2018/07/24 Python
学python安装的软件总结
2019/10/12 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python中p-value的实现方式
2019/12/16 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
社区文明倡议书
2015/04/28 职场文书
2016年教师新年寄语
2015/08/18 职场文书