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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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获取中英混合字符串长度的方法
2014/06/07 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
JavaScript接口实现方法实例分析
2020/05/16 Javascript
名片管理系统python版
2018/01/11 Python
Python 加密与解密小结
2018/12/06 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
tensorflow 变长序列存储实例
2020/01/20 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
公司员工安全协议书
2014/11/21 职场文书
小学班级口号大全
2015/12/25 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书