bootstrap实现树节点、树结构

先给你看看是不是你想实现的效果图。

最先想实现bootstrap的树结构的时候，百度的时候百度到这个玩意。

然后很高兴的点进链接去下载，才发现…

要花钱，这玩意还值得收费？最后实现了效果后，才写了该渣文。

首先介绍一下zTree该插件。
官方网站：http://www.treejs.cn/v3/main.php#_zTreeInfo
官方网站里面有demo，基本上就和Element-UI里面一样有可以看得见的效果图demo，然后也有对应的代码。

基本上你的树需要增删改查的需求的话，这个插件完全可以满足。（杀千刀的项目用jq+bts，写个树麻烦的要死，vue完全用不着这么麻烦！！）

最后，本文最开始效果图的代码如下

<!DOCTYPE html>
<HTML>
<HEAD><TITLE> ZTREE DEMO - select menu</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="../../../css/demo.css" type="text/css"><link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script><SCRIPT type="text/javascript">var setting = {view: {dblClickExpand: false},check: {enable: true},callback: {onRightClick: OnRightClick}};var zNodes =[{id:1, name:"无右键菜单 1", open:true, noR:true,children:[{id:11, name:"节点 1-1", noR:true},{id:12, name:"节点 1-2", noR:true}]},{id:2, name:"右键操作 2", open:true,children:[{id:21, name:"节点 2-1"},{id:22, name:"节点 2-2"},{id:23, name:"节点 2-3"},{id:24, name:"节点 2-4"}]},{id:3, name:"右键操作 3", open:true,children:[{id:31, name:"节点 3-1"},{id:32, name:"节点 3-2"},{id:33, name:"节点 3-3"},{id:34, name:"节点 3-4"}]}];function OnRightClick(event, treeId, treeNode) {if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {zTree.cancelSelectedNode();showRMenu("root", event.clientX, event.clientY);} else if (treeNode && !treeNode.noR) {zTree.selectNode(treeNode);showRMenu("node", event.clientX, event.clientY);}}function showRMenu(type, x, y) {$("#rMenu ul").show();if (type=="root") {$("#m_del").hide();$("#m_check").hide();$("#m_unCheck").hide();} else {$("#m_del").show();$("#m_check").show();$("#m_unCheck").show();}y += document.body.scrollTop;x += document.body.scrollLeft;rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});$("body").bind("mousedown", onBodyMouseDown);}function hideRMenu() {if (rMenu) rMenu.css({"visibility": "hidden"});$("body").unbind("mousedown", onBodyMouseDown);}function onBodyMouseDown(event){if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {rMenu.css({"visibility" : "hidden"});}}var addCount = 1;function addTreeNode() {hideRMenu();var newNode = { name:"增加" + (addCount++)};if (zTree.getSelectedNodes()[0]) {newNode.checked = zTree.getSelectedNodes()[0].checked;zTree.addNodes(zTree.getSelectedNodes()[0], newNode);} else {zTree.addNodes(null, newNode);}}function removeTreeNode() {hideRMenu();var nodes = zTree.getSelectedNodes();if (nodes && nodes.length>0) {if (nodes[0].children && nodes[0].children.length > 0) {var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";if (confirm(msg)==true){zTree.removeNode(nodes[0]);}} else {zTree.removeNode(nodes[0]);}}}function checkTreeNode(checked) {var nodes = zTree.getSelectedNodes();if (nodes && nodes.length>0) {zTree.checkNode(nodes[0], checked, true);}hideRMenu();}function resetTree() {hideRMenu();$.fn.zTree.init($("#treeDemo"), setting, zNodes);}var zTree, rMenu;$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);zTree = $.fn.zTree.getZTreeObj("treeDemo");rMenu = $("#rMenu");});//--></SCRIPT><style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{margin: 1px 0;padding: 0 5px;cursor: pointer;list-style: none outside none;background-color: #DFDFDF;
}</style></HEAD><BODY><ul id="treeDemo" class="ztree"></ul>
<div id="rMenu"><ul><li id="m_add" onclick="addTreeNode();">增加节点</li><li id="m_del" onclick="removeTreeNode();">删除节点</li><li id="m_check" onclick="checkTreeNode(true);">Check节点</li><li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li><li id="m_reset" onclick="resetTree();">恢复zTree</li></ul>
</div>
</BODY>
</HTML>

其中代码中src和herf引用的js和css，建议在这个官方网站里面下载，严格注意引入的先后问题。（引入先后问题可以看我上面的代码，照葫芦画瓢）

bootstrap实现树节点、树结构相关推荐

Python 自动化-pywinauto库定位树结构控件里的树节点实例演示
首先通过 spy++ 工具定位树控件的类. 然后通过 get_item('\本地计算机策略\计算机配置\管理模板') 层级定位的方式即可定位到树节点. # -*- coding: UTF8 -*- ...
bootstrap树节点如何设置默认不展开_我开源了一个基于Vue的组织架构树组件
开门见山 Demo 演示地址:http://www.longstudy.club/vue... github 地址:https://github.com/qq44924588... 项目背景因为最近 ...
由浅入深：求给定两个树节点的最低公共祖先（二叉树、普通树结构）JAVA实现
最近看了一道面试题目,觉得很有意思,而且常常被问到,今天综合归纳了一下这道题目,并给出了各种变形题目,附上JAVA版的程序解答. 题目是这样的:寻找二叉树的最低公共祖先?(其中隐含着一个盲点:树是什么 ...
js遍历树节点下的所有子节点_「Javascript数据结构」× 二叉搜索树
目录树的相关术语二叉树和二叉搜索树二叉树的遍历二叉搜索树的搜索二叉搜索树的移除「树的相关术语」一个树结构包含一些列存在父子关系的节点.每个节点都有一个父节点(除了顶部的第一个节点)以 ...
uniapp树组件优化树节点设置单选，单击单选框可以选中多个偶尔根节点点击后会隐藏整棵树
在上篇文章的组件基础上做了两个调整 1.处理偶尔根节点点击后会隐藏整棵树的情况,lastRank是判断是否是最后一级,但是如果是根节点的话是不会有lastRank 2.处理树节点设置multiple是 ...
JS实现自定义折叠树节点展开层数
1. 描述在日常报表制作过程中,组织树形式是非常便捷常用的展示形式.但在使用过程中,因为数据量,以及组织树层级不确定时候.我们希望能够初始化时候根据需求展开一定层级的树节点. 2. 思路通过给组织 ...
ajax与easyui树节点,EasyUI中的tree用法介绍
真的是太忙了,本应该有好多东西可以写,但是没什么闲时间,每次想到写的时候,来点事就又给忘了.10月最后一天了,在忙也得把这篇文章写完,不然又得多一个空白月了. 这是之前带领成员开发一个小模块功能的时候 ...
easyui-treegrid移除树节点出错
easyui-treegrid移除树节点出错 >>>>>>>>>>>>>>>>>>>& ...
js 查找树节点数组去重
//查找树节点function findData(curOrg, id) {var array = [];if ((typeof curOrg == 'object') && (cur ...
flex tree 展开树节点
1展开树节点 public function expandChildrenOf(item:Object, open:Boolean):void 打开或关闭指定项目下的所有树项目.如果设置 dataPr ...

bootstrap实现树节点、树结构

bootstrap实现树节点、树结构相关推荐

最新文章

热门文章