Bootstrap树形控件使⽤⽅法详解
⼀、JQuery树形控件
Jquery树形控件是⼀款基于JQuery+bootstrap、完全通过js和样式⼿写出来的⾮常轻量级的控件，⽹上很多地⽅都能看到它的影⼦。它功能简单、⽤户体验不错。对于⼀些简单的层级关系展⽰⽐较实⽤，但对于节点的增删改实现起来就不容易了，如果⾮要做，可能需要⾃⼰去封装。
1、⼀睹初容
全部收起
展开⼀级
全部展开
2、代码⽰例
此控件实现起来也⾮常简单，只需要引⽤jQuery和bootstrap组件即可。
<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>
<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>
jquery是什么功能组件<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去添加。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。