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 学习点滴记录
Apr 24 Javascript
javascript 继承实现方法
Aug 26 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
javascript关于继承解析
May 10 Javascript
React组件的三种写法总结
Jan 12 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 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实现的简单在线计算器功能示例
2017/08/02 PHP
28个JS验证函数收集
2010/03/02 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
javascript每日必学之循环
2016/02/19 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python探索之SocketServer详解
2017/10/28 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
自定义django admin model表单提交的例子
2019/08/23 Python
基于python监控程序是否关闭
2020/01/14 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
环境工程专业自荐信
2014/03/03 职场文书
环保小标语
2014/06/13 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
万里长城导游词
2015/01/30 职场文书
慰问信格式
2015/02/14 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python