treetable怎么带参数_好用的TreeTable插件
插件描述:实现layui的树形表格treeTable,对layui数据表格进行扩展。
注:加载了外部json数据文件,本地预览会有跨域问题,需要在服务端运行。
treetable-lay
实现layui的树形表格treeTable
1.简介
在layui数据表格之上进行扩展实现。
2.使用方法
2.1.引入模块
下载module/treetable-lay整个文件夹,放在你的项目里面,然后使用模块加载的方式使用:layui.config({
base: 'module/'
}).extend({
treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
var treetable = layui.treetable;
});
2.2.渲染表格
layui.use(['treetable'], function () {
var treetable = layui.treetable;
// 渲染表格
treetable.render({
treeColIndex: 2, // treetable新增参数
treeSpid: -1, // treetable新增参数
treeIdName: 'd_id', // treetable新增参数
treePidName: 'd_pid', // treetable新增参数
treeDefaultClose: true, // treetable新增参数
treeLinkage: true, // treetable新增参数
elem: '#table1',
url: 'json/data1.json',
cols: [[
{type: 'numbers'},
{field: 'id', title: 'id'},
{field: 'name', title: 'name'},
{field: 'sex', title: 'sex'},
{field: 'pid', title: 'pid'},
]]
});
});
注意:
可以使用url传递数据,也可以使用data传递数据,如果使用url传递数据,参数是where字段, 跟layui数据表格的使用方式一致。
数据格式
总而言之就是以id、pid的形式,不是以subMenus的形式,当然id、pid这两个字段的名称可以自定义:{
"code": 0,
"msg": "ok",
"data": [{
"id": 1,
"name": "xx",
"sex": "male",
"pid": -1
},{
"id": 2,
"name": "xx",
"sex": "male",
"pid": 1
}
]
}
2.3.参数说明
layui数据表格的所有参数都可以用,除此之外treetable新增的参数有:参数类型是否必填描述treeColIndexint是树形图标显示在第几列
treeSpidobject是最上级的父级id
treeIdNamestring否id字段的名称
treePidNamestring否pid字段的名称
treeDefaultCloseboolean否是否默认折叠
treeLinkageboolean否父级展开时是否自动展开所有子级
treeColIndex
树形图标(箭头和文件夹、文件的图标)显示在第几列, 索引值是cols数组的下标。
treeSpid
最上级的父级id,比如你可以规定pid为0或-1的是最顶级的目录。
treeIdName
treetable是以id和pid字段来渲染树形结构的,如果你的数据没有id和pid字段,你可以指定id和pid字段的名称。
treePidName
pid在你的数据字段中的名称。
treeDefaultClose
默认是全部展开的,如果需要默认全部关闭,加上treeDefaultClose:true即可。
treeLinkage
父级展开时是否自动展开所有子级
2.4.注意事项不能使用分页功能,即使写了page:true,也会忽略该参数。
不能使用排序功能,不要开启排序功能。
table.reload()不能实现刷新,请参考demo的刷新。
除了文档上写的treetable.xxx的方法之外,其他数据表格的方法都使用table.xxx。
建议删除和修改请求完后台之后请刷新(重新渲染)表格,最好不要使用obj.delete方式删除。
2.5.其他方法
全部展开treetable.expandAll('#table1');
全部折叠treetable.foldAll('#table1');
2.6.如何修改图标
通过css来修改图标,content是图标的unicode字符。
修改文件夹图标:/** 未展开 */
.treeTable-icon .layui-icon-layer:before {
content: "\e638";
}
/** 展开 */
.treeTable-icon.open .layui-icon-layer:before {
content: "\e638";
}
?修改文件图标:
.treeTable-icon .layui-icon-file:before {
content: "\e621";
}
?修改箭头的图标:
/** 未展开 */
.treeTable-icon .layui-icon-triangle-d:before {
content: "\e623";
}
/** 展开 */
.treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e625";
}
treetable怎么带参数_好用的TreeTable插件相关推荐
- 页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递
同学们大家好,我是小伊同学,上一节课我们讲解了全局数据的读写方法,那么在页面间同样需要数据交互,今天我们就来学习这部分内容. 在微信小程序中,我们常常需要将数据在页面之间进行传递,比如用户的身份信息, ...
- delve 调试带参数_带你学够浪:Go语言基础系列-环境配置和 Hello world
前面几周陆陆续续写了一些后端技术的文章,包括数据库.微服务.内存管理等等,我比较倾向于成体系的学习,所以数据库和微服务还有后续系列文章补充. 最近工作上比较多的 Golang 编程,现在很多互联网公司 ...
- nohup 带参数_广州市西门子两通阀VVF42.40-25C+SKD62带断电
广州市西门子两通阀带断电西门子温控阀特点:优点具有比例积分(PI)或比例积分.微分(PID)调节功能,控制稳定.针对不同的现场工况,可灵活调整控制参数,达到系统优化可由控制器读取当前温度值及观察阀门工 ...
- pb 执行存储过程带参数_数据库存储过程
1. 存储过程的类型: (1) 用户自定义存储过程 自定义存储过程即用户使用T_SQL语句编写的.为了实现某一特定业务需求,在用户数据库中编写的T_SQL语句集合,自定义存储过程可以接受输入参数.向客 ...
- put url带参数_避免自己写的 url 被diss!建议看看这篇RESTful API简明教程!
RESTful API 是每个程序员都应该了解并掌握的基本知识,我们在开发过程中设计 API 的时候也应该至少要满足 RESTful API 的最基本的要求(比如接口中尽量使用名词,使用 POST 请 ...
- treetable怎么带参数_VUE treeTable 自定义方法怎么传递
\#\#\# 问题描述早期element版本没有treetable vueadmin中有一种treetable的实现方法, 其中有说可以传递自定义解析数据的方法,但是我通过prop传递方法一直报错 \ ...
- url没有参数名怎么直接带参数_用30行Python爬虫带你看PLMM(划掉,喵星人)
偶尔写写爬虫也算是打磨无聊生活的一种方式了. 之前写了一个用100多行Python爬虫看世界的帖子,有兴趣的朋友可以看一下. 带你用100多行Python爬虫看看今天的世界(上) 带你用100多行Py ...
- java重定向带参数_急 求助重新封装重定向带参数问题
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 这是我写的代码 不知道行不行 求助 package base.web.resolver.result;import java.util.HashMap;i ...
- c代码中 执行sh文件 带参数_创建含有$1参数的Bash脚本以及运行脚本的三种方法...
一.先创建一个简易脚本 要求: 1.创建一个名为demo.sh的文件,如果该脚本后跟上文件名某某某,就会产生一个名为某某的文件夹 2.某某某文件内要有一个index.html及文件夹css和文件夹js ...
- 小程序点击调转带参数_带你走遍苏大的每个角落,校园导览小程序上线!
精彩推荐 1. 招新 | 携手趁韶华,约你同做"校媒人"! 2. 迎新现场 | 今天,"小20"是苏大的主角 3. 苏州大学与亨通集团签订战略合作协议 钟楼.红 ...
最新文章
- java IO流文件的读写具体实例
- 【mysql错误】用as别名 做where条件,报未知的列 1054 - Unknown column 'name111' in 'field list'...
- 不要瞧不起技术,项目中有了技术管理会让项目经理很省心
- JavaEE互联网轻量级框架整合开发(书籍)阅读笔记(1):Mybatis和Hibernate概念理解...
- Tomcat7.0安装配置
- 【NLP】DataCLUE: 国内首个以数据为中心的AI测评
- 乔治敦大学计算机专业排名,2020USNEWS数据科学与分析专业综合排名(上)
- 两个iphone怎么大量传照片_「唯物」传个视频到 iPhone,有了新方法
- 手机12306买卧铺下铺技巧_手机12306怎么买下铺(微信买火车票指定下铺)
- ASS/SSA字幕格式
- 旧式电话机的高压振铃电路图
- C++:wchar_t 和C++新增类型:char16_t char32_t
- InsecureProgramming-master——abo1
- NGS数据分析实践:06. 数据预处理 - 序列比对+PCR重复标记+Indel区域重比对+碱基质量重校正
- oracle sysobject,SQL2000数据库提示未能读取并闩锁页 sysobjects 失败数据库修复
- 写在2014年的感恩节
- UUID的含义及实现原理
- Hadoop安装教4程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.0
- 爬取大众点评数据的血泪史
- 谈谈象棋的基本功《一》残局篇
热门文章
- linux - android安卓 - stagefright
- VHDL学习笔记——半加器 多路选择器 分频器
- 用acdsee制作html,ACDsee教程:ACDSee的HTML相册生成
- MSNP18协议分析(一)--- MSN协议介绍
- SourceOffSite Server和Visual SourceSafe 6.0d锁死问题的解决
- 大厂工作3年,我决定把大学到现在7年所有珍藏的书籍都分享一遍
- 微商引流脚本,微商怎样选择正确的引流脚本?
- SSM系类代码:org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer
- 怎么更改计算机上的限制应用,图文详解通过修改win10系统组策略实现限制指定应用程序的运行-系统操作与应用
-亦是美网络...
- 计算机学院实习报告3000字(Java开发实习)--持续更新中,多个专业,以及版本