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这种结构的数组即可。