首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap树形控件使用方法详解

Posted in Javascript onJanuary 27, 2016

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

1、一睹初容

全部收起

Bootstrap树形控件使用方法详解

展开一级

Bootstrap树形控件使用方法详解

全部展开

Bootstrap树形控件使用方法详解

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>
    <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

默认展开一级

Bootstrap树形控件使用方法详解

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

Bootstrap树形控件使用方法详解

多级展开

Bootstrap树形控件使用方法详解

在左边可以编辑节点名称

Bootstrap树形控件使用方法详解

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

Bootstrap树形控件使用方法详解

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

Bootstrap树形控件使用方法详解

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

三、通用树形控件——zTree

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

1、组件使用

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

Bootstrap树形控件使用方法详解

2、组件效果

节点全部收起

Bootstrap树形控件使用方法详解

节点展开

Bootstrap树形控件使用方法详解

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

Bootstrap树形控件使用方法详解

可以增删改节点

Bootstrap树形控件使用方法详解

Bootstrap树形控件使用方法详解

点击文本框出现树

Bootstrap树形控件使用方法详解

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

需要引用的js和css文件

<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

<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初始化

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默认是隐藏的。

<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()方法

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学习教程 Bootstrap实战教程 Bootstrap插件使用教程

以上三种树形组件，各有千秋，可以根据需求选用不同的组件，希望本文所述对大家学习树形控件有所帮助。

最近新补充的一系列bootstrap基础教程，欢迎大家学习。

Bootstrap树形控件使用方法详解

- Author -

懒得安分

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
红米手机抢购的js代码
Mar 10 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
原生js实现分页效果
Sep 23 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
window.onerror()的用法与实例分析
Jan 27 #Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 #Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 #Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 #Javascript
再谈JavaScript异步编程
Jan 27 #Javascript
简单介绍jsonp 使用小结
Jan 27 #Javascript
理解javascript异步编程
Jan 27 #Javascript
calc(1) Hive(5) swing(1) Windows Server(4) SandBox(1) K8s(1) OpenFeign(1) NTP(1) Windows Server 2022(3) HttpClient(1)
You might like
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python continue继续循环用法总结
2018/06/10 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
全球销量第一生发产品：Viviscal
2017/12/21 全球购物
eDreams意大利：南欧领先的在线旅行社
2018/11/23 全球购物
eDreams葡萄牙：全球最大的在线旅行社之一
2019/04/15 全球购物
美国渔具店：FishUSA
2019/08/07 全球购物
网络体系结构及协议的定义
2014/03/13 面试题
保护黄河倡议书
2014/05/16 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
怎么写工作检讨书
2014/11/16 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
导游词之上海豫园
2019/10/24 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫