当前位置: 首页 > 编程笔记 >

layui实现数据表格自定义数据项

连厉刚
2023-03-14
本文向大家介绍layui实现数据表格自定义数据项,包括了layui实现数据表格自定义数据项的使用技巧和注意事项,需要的朋友参考一下

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实现数据表格自定义数据项就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍layui数据表格实现重载数据表格功能(搜索功能),包括了layui数据表格实现重载数据表格功能(搜索功能)的使用技巧和注意事项,需要的朋友参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 官方的文档已经把方法说的很明白了,下面展示实例

  • 本文向大家介绍layui表格数据重载,包括了layui表格数据重载的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下 html代码 js代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍layui实现数据表格隐藏列的示例,包括了layui实现数据表格隐藏列的示例的使用技巧和注意事项,需要的朋友参考一下 在使用layui做数据表格的时候,插入的数据的id是不是一组连续的数字,那么就需要用到layui的cols的type属性。 我们就会获得一列有序的数列(ps:这里的必须加width属性,使用minWidth没有用,如果没用width,那么会使用layui的表格默认宽度

  • 本文向大家介绍Layui事件监听的实现(表单和数据表格),包括了Layui事件监听的实现(表单和数据表格)的使用技巧和注意事项,需要的朋友参考一下 一、表单的事件监听 先介绍一下几个属性的用法 1、lay-filter 事件过滤器 相当于选择器,layui的专属选择器 2、lay-verify 验证属性 属性值可以是 :required必填项, phone手机号,email邮箱,url网址,num

  • 本文向大家介绍layui使用数据表格实现购物车功能,包括了layui使用数据表格实现购物车功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码,供大家参考,具体内容如下 html部分 css部分 js部分 功能核心知识: 通过一个全局数组来存储,点击商品后,拿到的商品信息,用数据来驱动购物车表格显示。 以上就是本文的全部内容,希望对大家的

  • http://static.springsource.org/spring-data/data-mongodb/docs/current/reference/html/repositories.html Spring Data的MongoTemplate和MongoRepository有什么区别? 我这样做是因为我需要使用MongoTemplate进行特殊查询。 这里也描述了这个问题,但解决方案似