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 相关文章推荐
document.compatMode介绍
May 21 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
PHP实现限制IP访问的方法
2017/04/20 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
温泉秘密:Onsen Secret
2020/07/06 全球购物
竞选班干部演讲稿300字
2014/08/20 职场文书
毕业证代领委托书
2014/09/26 职场文书
小班上学期个人总结
2015/02/12 职场文书
让子弹飞观后感
2015/06/11 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
MySQL库表名大小写的选择
2021/06/05 MySQL