Bootstrap 树控件使用经验分享(图文解说)


Posted in Javascript onNovember 06, 2017

jquery 树形控件

jquery 树形控件是一款基于jquery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件,它功能简单、用户体验不错。对于一些简单的层级关系展示比较实用。

前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项。不管怎么样,树控件都是很多项目里面不可或缺的组件之一。今天,博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享,希望能帮大家找到最合适的控件。还是那句话:控件没有最好,只有最合适。

一、JQuery树形控件

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

1、一睹初容

全部收起

Bootstrap 树控件使用经验分享(图文解说)

展开一级

Bootstrap 树控件使用经验分享(图文解说)

全部展开

Bootstrap 树控件使用经验分享(图文解说)

2、代码示例

此控件实现起来也非常简单,只需要引用jQuery和bootstrap组件即可。

<link href="~/Content/Tree1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/Tree1/css/style.css" rel="external nofollow" 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

这个组件是从网上找到的,最初演示,组内成员一致觉得效果很赞。因为它通过树形展示,方便的提供了节点的增删改。节点的伸缩效果也比较好。好了来看看。Demo以及下载地址:http://www.jq22.com/jquery-info401

1、初见Treed

默认展开一级

Bootstrap 树控件使用经验分享(图文解说)

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

Bootstrap 树控件使用经验分享(图文解说)

多级展开

Bootstrap 树控件使用经验分享(图文解说)

在左边可以编辑节点名称

Bootstrap 树控件使用经验分享(图文解说)

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

Bootstrap 树控件使用经验分享(图文解说)

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

Bootstrap 树控件使用经验分享(图文解说)

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

三、通用树形控件——zTree

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

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="external nofollow" rel="stylesheet" />
 <script src="~/Scripts/jquery.ztree.all-3.5.js"></script>
 <link href="~/Content/zTree.theme.metro.css" rel="external nofollow" 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 树控件使用经验分享(图文解说),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
javascript断点调试心得分享
Apr 23 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
js实现随机点名功能
Dec 23 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
vue复合组件实现注册表单功能
Nov 06 #Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
python远程登录代码
2008/04/29 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
浅谈django 重载str 方法
2020/05/19 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
django中cookiecutter的使用教程
2020/12/03 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
员工考核评语大全
2014/04/26 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers