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基础教程,欢迎大家学习。

Javascript 相关文章推荐
JavaScript之引用类型介绍
Aug 10 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
js对象的复制继承实例
Jan 10 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Vue 2.X的状态管理vuex记录详解
Mar 23 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
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
You might like
德生S2000电路分析
2021/03/02 无线电
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
jquery自定义表格样式
2015/11/23 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
Python 实现微信防撤回功能
2019/04/29 Python
Django 路由控制的实现
2019/07/17 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
如何基于线程池提升request模块效率
2020/04/18 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
天网工程实施方案
2014/03/26 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
2014年采购部工作总结
2014/11/20 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android