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时间戳转为日期格式的方法
Dec 28 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
简述pm2常用命令集合及配置文件说明
May 30 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
Javascript this指针
2009/07/30 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
Openlayers实现地图的基本操作
2020/09/28 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
python生成器的使用方法
2013/11/21 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python中itertools的用法详解
2020/02/07 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python实现批量修改文件名
2020/03/23 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
找工作最新求职信
2013/12/22 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
综治工作汇报材料
2014/10/27 职场文书
团员个人年度总结
2015/02/26 职场文书
2015年团支部工作总结
2015/04/03 职场文书
民事起诉书范本
2015/05/19 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书