Metrics
0
Watch 61 Star 128 Fork 20

harris / JQuery TreeTable PluginJavaScript

Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
JQuery TreeTable Plugin基于JQuery的表格树插件,按data-id和data-pid计算布局,在表格中展现树型结构。附加展开、关闭、查询、删除、注销、重置等公共函数。 spread retract

Clone or download
harris authored Default
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Treetable Plugin v1.2.7

基于JQuery的表格树插件,按 data-id和data-pid计算布局,在表格中展现树型结构。

插件包含初始化选项,监听事件和常用方法。

内置样式使用bootstrap3

在线演示

当行属性 data-pid='' 或 data-pid='root' 时识别为“根目录”。

<tr data-id="scml" data-pid=""></tr>
<tr data-id="scml" data-pid="root"></tr>

Download 下载

src/bootstrap-treetable.js

Import script 标签引入

<script src="js/bootstrap-treetable.js"></script>

initialized 初始化

var treetable = $('#treetable').BootstrapTreeTable({
    expandlevel: 1,
    expandAll: false,
    collapseAll: false,
    maxResult: ''
})

Core options 选项

  • levelSpacing integer 20 级次间距 px
  • column integer 0 指定排序列号
  • expandlevel integer 0 默认展开级次
  • expandAll boolean false 是否全部展开
  • collapseAll boolean false 是否全部关闭
  • expendedIcon string '' 节点展开图标
  • collapsedIcon string '' 节点关闭图标
  • leafIcon string '' 节点展开图标
  • maxResult integer 20 搜索最大结果集,超过将停止返回结果
  • matchClass string 'text-danger' 查询匹配节点class
  • choseClass string 'bg-info' 定位匹配节点class

Events 事件

  • show.bs.treetable 展开节点时触发事件 Event e,Object node
  • shown.bs.treetable 展开节点后触发事件 Event e,Object node
  • hide.bs.treetable 关闭节点时触发事件 Event e,Object node
  • hidden.bs.treetable 关闭节点后触发事件 Event e,Object node
  • initialized.bs.treetable 初始化插件完成后触发事件 Event e
$('#treetable').BootstrapTreeTable().on("show.bs.treetable", function (e, node) {
    //console.log('show', node);
})

Methods 方法

  • searchNodeName 查询节点,返回结果数 string查询字符 string
  • searchNodeId 根据节点data-id查询,并高亮显示 stringdata-id
  • removeById 根据节点data-id删除节点 stringdata-id
  • removeByNode 根据节点Object删除节点 Objectnode
  • expendLevel 展开全部指定级次 integerlevel
  • expendAll 展开全部节点
  • collapseAll 关闭全部节点
  • destroy 注销插件
  • reset 重置插件
$('#treetable').BootstrapTreeTable('searchNodeName', '计算机');
$('#treetable').BootstrapTreeTable('searchNodeId', '337A2575C9404167AFE020D8C27D1C45');
$('#treetable').BootstrapTreeTable('removeById', '337A2575C9404167AFE020D8C27D1C45');

var node = $(this).parents('tr');
$('#treetable').BootstrapTreeTable('removeByNode', node);

$('#treetable').BootstrapTreeTable('removeById', '337A2575C9404167AFE020D8C27D1C45');
$('#treetable').BootstrapTreeTable('expendLevel','2');
$('#treetable').BootstrapTreeTable('expendAll');
$('#treetable').BootstrapTreeTable('collapseAll');
$('#treetable').BootstrapTreeTable('destroy');
$('#treetable').BootstrapTreeTable('reset');

Properties 属性

  • getMaxLevel 获取层级数 integer
$('#treetable').BootstrapTreeTable('getMaxLevel');

Comments ( 10 )

You need to Sign in for post a comment

Help Search

Gitee_you_jiang_zheng_wen Zheng_wen_close