treetable php,第105款插件:jquery.treetable.js的使用

[TOC]

之前我们用过 ztree.js,它是有一个json数据,然后将之变为树状结构!

现在我们的情况是有一个表格,想将之变为树状结构,怎么来操作呢?

下边我来为大家介绍一款jquery的插件jquery.treetable.js插件,这款神器就是这样诞生的!

演示地址

插件介绍

1、GitHub 地址官方网站:https://github.com/ludo/jquery-treetable

备注:clone下来后记得 bower install,否则会看不到实际效果的

再备注:网上我共找到好几个treetable,其实都挺好用的!但这一款是数年来一直在更新的。可靠实用!

2、 API 地址 http://ludo.cubicphuse.nl/jquery-treetable/

3、 jQuery 官网链接 http://plugins.jquery.com/treetable/1

需要加载的JS和CSS内容

需要说明的是,必须引用的JS和扩展代码:

这里是引用bootcdn.cn的绝对地址,有兴趣的可以直接使用

表格特征

很明显,我们多了data-tt-id和data-tt-parent-id两个值

名称

备注

data-tt-id

级别,0为1级,1为2级

data-tt-parent-id

上一级的ID

下边来讲一下表格的演变过程

分析过程

(一)我们常用的表格

(二)经过变化静态树表格

只需要 $("#id").treetable(); 这一句代码即可!

(三)经过变化的可伸缩(加参数)-表格

这一个表格和一个表格是一样的,只不过多加了一个参数而已

只需要 $("#id").treetable({expandable: true}); 这一句代码即可!

有关更多的参数请参考:

想要了解更多的参数,请看 http://ludo.cubicphuse.nl/jquery-treetable/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值