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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jquery获取radio值实例
Oct 16 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue3实现v-model原理详解
Oct 09 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
document.getElementBy("id")与$("#id")有什么区别
2013/09/22 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js实现圆盘记速表
2015/08/03 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
js实现一个简易计算器
2020/03/30 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python编程实现正则删除命令功能
2017/08/30 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python for循环中的陷阱详解
2018/07/13 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
小学生作文评语
2014/04/18 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
公司新员工欢迎词
2015/09/30 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL