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 来操作字符串(一些字符串函数)
Feb 15 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
浅谈克隆 JavaScript
Nov 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 遍历文件实现代码
2011/05/04 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
利用Python破解斗地主残局详解
2017/06/30 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python实现滑雪游戏
2020/02/22 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
交警作风整顿剖析材料
2014/10/11 职场文书
关于长城的导游词
2015/01/30 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
Python Django项目和应用的创建详解
2021/11/27 Python