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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
Javascript模拟实现new原理解析
Mar 03 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php简单实现MVC
2015/02/05 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
php查询内存信息操作示例
2019/05/09 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
详解Python中的动态属性和特性
2018/04/07 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
python中的unittest框架实例详解
2021/02/05 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
高二历史教学反思
2014/01/25 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
工作表扬信范文
2015/01/17 职场文书
python入门之算法学习
2021/04/22 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android