Bootstrap树形控件

最新推荐文章于 2024-09-24 07:44:20 发布
最新推荐文章于 2024-09-24 07:44:20 发布
阅读量5.1k 收藏 1
点赞数
分类专栏： bootstrap 文章标签： bootstrap 控件

一、JQuery树形控件
Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用，但对于节点的增删改实现起来就不容易了，如果非要做，可能需要自己去封装。

1、一睹初容

全部收起

展开一级

全部展开

2、代码示例
此控件实现起来也非常简单，只需要引用jQuery和bootstrap组件即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link href= "~/Content/Tree1/css/bootstrap.min.css" rel= "stylesheet" />
  <link href= "~/Content/Tree1/css/style.css" rel= "stylesheet" />
 
  <script src= "~/Scripts/jquery-1.10.2.js" ></script>
  <script type= "text/javascript" >
　　$( function (){
  　　$( '.tree li:has(ul)' ).addClass( 'parent_li' ).find( ' > span' ).attr( 'title' , 'Collapse this branch' );
  　　$( '.tree li.parent_li > span' ).on( 'click' , function (e) {
  　　 var children = $( this ).parent( 'li.parent_li' ).find( ' > ul > li' );
  　　 if (children.is( ":visible" )) {
   　　children.hide( 'fast' );
   　　$( this ).attr( 'title' , 'Expand this branch' ).find( ' > i' ).addClass( 'icon-plus-sign' ).removeClass( 'icon-minus-sign' );
  　　} else {
   　　children.show( 'fast' );
   　　$( this ).attr( 'title' , 'Collapse this branch' ).find( ' > i' ).addClass( 'icon-minus-sign' ).removeClass( 'icon-plus-sign' );
  　　}
  　　e.stopPropagation();
  　　});
　　});
  </script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
< div class = "tree well" >
  < ul >
   < li >
   < span >< i class = "icon-folder-open" ></ i > 顶级节点1</ span > < a href = "" >Goes somewhere</ a >
   < ul >
    < li >
    < span >< i class = "icon-minus-sign" ></ i > 一级节点1</ span > < a href = "" ></ a >
    < ul >
     < li >
     < span >< i class = "icon-leaf" ></ i > 二级节点1_1</ span > < a href = "" ></ a >
     </ li >
    </ ul >
    </ li >
    < li >
    < span >< i class = "icon-minus-sign" ></ i > 一级节点2</ span > < a href = "" ></ a >
    < ul >
     < li >
     < span >< i class = "icon-leaf" ></ i >二级节点2_1</ span > < a href = "" ></ a >
     </ li >
     < li >
     < span >< i class = "icon-minus-sign" ></ i > 二级节点2_2</ span > < a href = "" ></ a >
     < ul >
      < li >
      < span >< i class = "icon-minus-sign" ></ i >三级节点2_1</ span > < a href = "" ></ a >
      < ul >
       < li >
       < span >< i class = "icon-leaf" ></ i >四级节点2_1</ span > < a href = "" ></ a >
       </ li >
       < li >
       < span >< i class = "icon-leaf" ></ i > 四级节点2_2</ span > < a href = "" ></ a >
       </ li >
      </ ul >
      </ li >
      < li >
      < span >< i class = "icon-leaf" ></ i >三级节点2_2</ span > < a href = "" ></ a >
      </ li >
      < li >
      < span >< i class = "icon-leaf" ></ i > 三级节点2_3</ span > < a href = "" ></ a >
      </ li >
     </ ul >
     </ li >
     < li >
     < span >< i class = "icon-leaf" ></ i >二级节点2_3</ span > < a href = "" ></ a >
     </ li >
    </ ul >
    </ li >
   </ ul >
   </ li >
   < li >
   < span >< i class = "icon-folder-open" ></ i > 顶级节点2</ span > < a href = "" ></ a >
   < ul >
    < li >
    < span >< i class = "icon-leaf" ></ i > 一级节点2_1</ span > < a href = "" ></ a >
    </ li >
   </ ul >
   </ li >
  </ ul >
  </ div >

这些代码都是直接从网上down下来的，节点上面的图标可以通过样式修改，图标样式也是基于bootstrap的。如果需要动态添加节点，可以自己封装组件去拼html，实现起来应该也比较简单。由以上可知此组件的轻量级，如果你需要对节点作增删改或者选择等操作，不要急，下面的控件可能比较适用。

二、文件树编辑插件Treed

这个组件是从网上找到的，最初演示，组内成员一致觉得效果很赞。因为它通过树形展示，方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。

1、初见Treed

默认展开一级

点击左边的“+”号和右边的节点都会去展开子节点

多级展开

在左边可以编辑节点名称

按Enter键换行新增兄弟节点，同样删除换行就可以删除节点。

按Enter键后再按下Tab键可以新增子节点

很强大有木有。审核元素可知它使用的是html5的svg标签来实现的，所以对浏览器有一定的要求。

三、通用树形控件——zTree

ztree是一个传统的树形组件，其强大的功能决定他在树形控件界的地位。不管是树形展示，还是编辑，又或者是节点单选和多选，它都提供了强大的功能API。但是，由于它界面效果不太好看，所以很多公司使用它的时候都会有一定的犹豫。所幸，至从出了扁平化风格后，ztree也做了一定的美化，比如它的Metro风格的组件和bootstrap风格就非常相像。今天就来结合Metro风格的ztree来介绍下这个组件的一些用法。

1、组件使用

此组件可直接通过Nuget去添加。

2、组件效果

节点全部收起

节点展开

节点选中，当然如果需要可以变成单选。

可以增删改节点

点击文本框出现树

3、代码示例
3.1 直接在界面显示文本框

需要引用的js和css文件

?
1
2
3
4
5
6
<script src= "~/Scripts/jquery-1.10.2.js" ></script>
<script src= "~/Content/bootstrap/js/bootstrap.js" ></script>
<link href= "~/Content/bootstrap/css/bootstrap.css" rel= "stylesheet" />
 
<script src= "~/Scripts/jquery.ztree.all-3.5.js" ></script>
<link href= "~/Content/zTree.theme.metro.css" rel= "stylesheet" />

页面html　　

?
1
2
3
< div id = "menuContent" class = "menuContent" style = "width:95%;border:1px solid rgb(170,170,170);z-index:10;" >
   < ul id = "treeDemo" class = "ztree" style = "margin-top:0; width:100%; height:auto;" ></ ul >
  </ div >

Js初始化

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var setting = {
  view: {
  addHoverDom: addHoverDom,
  removeHoverDom: removeHoverDom,
  selectedMulti: false
  },
  check: {
  enable: true
  },
  data: {
  simpleData: {
   enable: true
  }
  },
  edit: {
  enable: false
  }
};
 
var zNodes = [
  { id: 1, pId: 0, name: "父节点1" , open: true },
  { id: 11, pId: 1, name: "父节点11" },
  { id: 111, pId: 11, name: "叶子节点111" },
  { id: 112, pId: 11, name: "叶子节点112" },
  { id: 113, pId: 11, name: "叶子节点113" },
  { id: 114, pId: 11, name: "叶子节点114" },
  { id: 12, pId: 1, name: "父节点12" },
  { id: 121, pId: 12, name: "叶子节点121" },
  { id: 122, pId: 12, name: "叶子节点122" },
  { id: 123, pId: 12, name: "叶子节点123" },
  { id: 124, pId: 12, name: "叶子节点124" },
  { id: 13, pId: 1, name: "父节点13" , isParent: true },
  { id: 2, pId: 0, name: "父节点2" },
  { id: 21, pId: 2, name: "父节点21" , open: true },
  { id: 211, pId: 21, name: "叶子节点211" },
  { id: 212, pId: 21, name: "叶子节点212" },
  { id: 213, pId: 21, name: "叶子节点213" },
  { id: 214, pId: 21, name: "叶子节点214" },
  { id: 22, pId: 2, name: "父节点22" },
  { id: 221, pId: 22, name: "叶子节点221" },
  { id: 222, pId: 22, name: "叶子节点222" },
  { id: 223, pId: 22, name: "叶子节点223" },
  { id: 224, pId: 22, name: "叶子节点224" },
  { id: 23, pId: 2, name: "父节点23" },
  { id: 231, pId: 23, name: "叶子节点231" },
  { id: 232, pId: 23, name: "叶子节点232" },
  { id: 233, pId: 23, name: "叶子节点233" },
  { id: 234, pId: 23, name: "叶子节点234" },
  { id: 3, pId: 0, name: "父节点3" , isParent: true }
];
 
$(document).ready( function () {
  $.fn.zTree.init($( "#treeDemo" ), setting, zNodes);
});
 
function addHoverDom(treeId, treeNode) {
  var sObj = $( "#" + treeNode.tId + "_span" );
  if (treeNode.editNameFlag || $( "#addBtn_" + treeNode.tId).length > 0) return ;
  var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
  + "' title='add node' onfocus='this.blur();'></span>" ;
  sObj.after(addStr);
  var btn = $( "#addBtn_" + treeNode.tId);
  if (btn) btn.bind( "click" , function () {
  var zTree = $.fn.zTree.getZTreeObj( "treeDemo" );
  zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
  return false ;
  });
};
function removeHoverDom(treeId, treeNode) {
  $( "#addBtn_" + treeNode.tId).unbind().remove();
};

3.2 默认隐藏，触发某个事件的时候出现树。这种场景在项目里面非常常见，一般用于选择树节点。所以博主把这个也单独拿出来说下吧。

div默认是隐藏的。

?
1
2
3
4
< input type = "text" class = "form-control" id = "txt_ztree" placeholder = "点击文本框出现ztree" onclick = "showMenu()" />
   < div id = "menuContent2" class = "menuContent" style = "display:none;position: absolute;width:95%;border:1px solid rgb(170,170,170);z-index:10;" >
   < ul id = "treeDemo2" class = "ztree" style = "margin-top:0; width:160px; height:auto;" ></ ul >
   </ div >

在js里面初始化树以及注册showMenu()方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var setting2 = {
  check: {
  enable: true ,
  chkStyle: "radio" ,
  radioType: "all"
  },
  view: {
  dblClickExpand: false
  },
  data: {
  simpleData: {
   enable: true
  }
  },
  callback: {
  onClick: onClickNode,
  onCheck: onCheck
  }
};
 
var zNodes = [
  { id: 1, pId: 0, name: "父节点1" , open: true },
  { id: 11, pId: 1, name: "父节点11" },
  { id: 111, pId: 11, name: "叶子节点111" },
  { id: 112, pId: 11, name: "叶子节点112" },
  { id: 113, pId: 11, name: "叶子节点113" },
  { id: 114, pId: 11, name: "叶子节点114" },
  { id: 12, pId: 1, name: "父节点12" },
  { id: 121, pId: 12, name: "叶子节点121" },
  { id: 122, pId: 12, name: "叶子节点122" },
  { id: 123, pId: 12, name: "叶子节点123" },
  { id: 124, pId: 12, name: "叶子节点124" },
  { id: 13, pId: 1, name: "父节点13" , isParent: true },
  { id: 2, pId: 0, name: "父节点2" },
  { id: 21, pId: 2, name: "父节点21" , open: true },
  { id: 211, pId: 21, name: "叶子节点211" },
  { id: 212, pId: 21, name: "叶子节点212" },
  { id: 213, pId: 21, name: "叶子节点213" },
  { id: 214, pId: 21, name: "叶子节点214" },
  { id: 22, pId: 2, name: "父节点22" },
  { id: 221, pId: 22, name: "叶子节点221" },
  { id: 222, pId: 22, name: "叶子节点222" },
  { id: 223, pId: 22, name: "叶子节点223" },
  { id: 224, pId: 22, name: "叶子节点224" },
  { id: 23, pId: 2, name: "父节点23" },
  { id: 231, pId: 23, name: "叶子节点231" },
  { id: 232, pId: 23, name: "叶子节点232" },
  { id: 233, pId: 23, name: "叶子节点233" },
  { id: 234, pId: 23, name: "叶子节点234" },
  { id: 3, pId: 0, name: "父节点3" , isParent: true }
];
 
//初始化
$(document).ready( function () {
  $.fn.zTree.init($( "#treeDemo2" ), setting2, zNodes);
});
 
//显示菜单
function showMenu() {
  $( "#menuContent2" ).css({ left: "15px" , top: "34px" }).slideDown( "fast" );
 
  $( "body" ).bind( "mousedown" , onBodyDown);
}
//隐藏菜单
function hideMenu() {
  $( "#menuContent2" ).fadeOut( "fast" );
  $( "body" ).unbind( "mousedown" , onBodyDown);
}
function onBodyDown(event) {
  if (!(event.target.id == "menuBtn" || event.target.id == "menuContent2" || event.target.id == "txt_ztree" || $(event.target).parents( "#menuContent2" ).length > 0)) {
  hideMenu();
  }
}
 
//节点点击事件
function onClickNode(e, treeId, treeNode) {
  var zTree = $.fn.zTree.getZTreeObj( "treeDemo" );
  zTree.checkNode(treeNode, !treeNode.checked, null , true );
  return false ;
}
 
//节点选择事件
function onCheck(e, treeId, treeNode) {
  var zTree = $.fn.zTree.getZTreeObj( "treeDemo" ),
  nodes = zTree.getCheckedNodes( true ),
  v = "" ;
  var parentid = "" ;
  var parentlevel = "" ;
  for ( var i = 0, l = nodes.length; i < l; i++) {
  v += nodes[i].name + "," ;
  parentid += nodes[i].id + "," ;
  parentlevel += nodes[i].menu_level + "," ;
  }
  if (v.length > 0) {
  v = v.substring(0, v.length - 1);
  parentid = parentid.substring(0, parentid.length - 1);
  parentlevel = parentlevel.substring(0, parentlevel.length - 1);
  }
  else {
  return ;
  }
 
  hideMenu();
}

由于以上都是静态数据，如果需要从后台取数据动态加载树节点，可以去后台构造zNodes这种结构的数组即可。

bootstrap风格的树形插件zTree
01-12
这是一款使用 bootstrap风格的树形插件 zTree树形插件
Bootstrap树形控件使用方法详解
11-22
Bootstrap树形控件是一种基于JQuery和Bootstrap框架的轻量级UI组件，常用于呈现具有层级结构的数据。这种控件由于其简洁的样式和良好的用户体验，被广泛应用于各种Web应用中，尤其适合显示简单的层级关系，如目录...
JS组件系列——Bootstrap 树控件使用经验分享
weixin_33755847的博客
01-12 865
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。 一、JQuery树形控件 Jquery树形控件是一款基...
Bootstrap Tree View：优雅展示层级结构的利器
最新发布
gitblog_00074的博客
09-24 1283
Bootstrap Tree View：优雅展示层级结构的利器 项目地址:https://gitcode.com/gh_mirrors/pa/patternfly-bootstrap-treeview 在现代Web应用中，层级结构的数据展示是常见的需求。无论是文件系统、组织架构还是分类目录，一个直观且美观的树形视图都能极大地提升用户体验。今天，我们要介绍的是一款基于Bootstrap的树形视图组件...
JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
2401_84435192的博客
05-08 888
刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。
Bootstrap树形菜单插件TreeView.js使用方法详解
热门推荐
记事本
12-14 3万+
Bootstrap树形菜单插件TreeView.js使用方法详解
bootstrap-treeview 树形菜单控件
DJPLH的专栏
09-17 1006
bootstrap-treeview 树形菜单控件 https://github.com/jonmiles/bootstrap-treeview var tree = [ { text: "Parent 1", id:1, nodes: [...
bootstrap树形下拉框 下拉框树形菜单
06-06
首先，要实现Bootstrap树形下拉框，你需要包含以下关键文件： 1. Bootstrap CSS框架：确保引入bootstrap.min.css，以便获取Bootstrap的基本样式。 2. Bootstrap JavaScript库：引入bootstrap.min.js，用于处理交互和...
Bootstrap树形控件实现与应用解析
"Bootstrap树形控件的使用方法与实现细节" Bootstrap树形控件是一种在Web应用中常用于展示层级结构数据的组件，它基于流行的前端框架Bootstrap和JavaScript库JQuery构建。这个控件因其简洁的设计和良好的用户体验而...
BootstrapBlazor实战 Tree树形控件使用(1)
alex_zoucn的博客
04-01 2498
实战BootstrapBlazor树型控件Tree的使用, 以及整合Freesql orm快速制作数据库后台维护页面 demo演示的是Sqlite驱动,FreeSql支持多种数据库，MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess 1.Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠 基础用法 基础的树形结构展示 <Tree Items="@Items" OnTreeIte
jsTree树控件(基于jQuery, 超强悍)
01-26
插件描述：jsTree是基于javascript的一个跨浏览器树控件，功能强大.
BootstrapTreeView树形结构
08-11
BootstrapTreeView树形插件
js树形控件js树形控件
12-12
js树形控件js树形控件js树形控件js树形控件js树形控件js树形控件js树形控件js树形控件js树形控件js树形控件
超简单的js树控件，最大支持25万个节点（非ajax）自己写的。
09-03
自己写的js树，代码少，逻辑简单，可以很快掌握。 功能类似dtree，但最大负载量比dtree大，在火狐下开启这个js树的 setlazy(true)方法，可以在5秒内生成250000个节点的树（随机添加的节点）。 例子中是生成10000个节点。 注：在使用例子时，要点全部打开，请先将随机节点数设到1000以内。
treeview.js树控件
07-06
treeview.js树控件 用于做树形菜单 欢迎下载！！1！！
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 618
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
JavaScript树形控件大集合
Dreamer Thinker Doer
07-21 8441
转载自 anylzer 最终编辑 anylzer zTree  利用Jquery的核心代码，实现一套能完成大部分常用工作的Tree功能 兼容 IE、FireFox、Chrome 等浏览器（对于IE 6.0的兼容问题将不做特殊维护）在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一次性静态生成 和 Ajax异步加载 两种方式支持多种事件响应及反馈支持 Tree 的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值