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 IE和FF兼容性问题汇总
Feb 09 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
python thread 并发且顺序运行示例
2009/04/09 Python
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python结合API实现即时天气信息
2016/01/19 Python
简单易懂的python环境安装教程
2017/07/13 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python 实现表情识别
2020/11/21 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
迪奥美国官网:Dior美国
2019/12/07 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
质检部部长职责
2013/12/16 职场文书
实习单位评语
2014/04/26 职场文书
兵马俑的导游词
2015/02/02 职场文书
公司捐书倡议书
2015/04/27 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
教师培训简讯
2015/07/20 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
Python实现批量自动整理文件
2022/03/16 Python