zTree实现删除树子节点

1、实现源码

<!DOCTYPE html>
<html>
<head>
	<title>zTree实现基本树</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../css/demo.css">
	<link rel="stylesheet" type="text/css" href="../../../css/zTreeStyle/zTreeStyle.css">
	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript">
		<!--
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			{ id:1, pId:0, name:"湖北省", open:true},
			{ id:11, pId:1, name:"武汉市", open:true},
			{ id:111, pId:11, name:"汉口"},
			{ id:112, pId:11, name:"汉阳"},
			{ id:113, pId:11, name:"武昌"},
			{ id:12, pId:1, name:"黄石市"},
			{ id:121, pId:12, name:"黄石港区"},
			{ id:122, pId:12, name:"西塞山区"},
			{ id:123, pId:12, name:"下陆区"},
			{ id:124, pId:12, name:"铁山区"},
			{ id:13, pId:1, name:"黄冈市"},
			{ id:131, pId:13, name:"黄州区"},
			{ id:132, pId:13, name:"麻城市"},
			{ id:133, pId:13, name:"武穴市"},
			{ id:134, pId:13, name:"团风县"},
			{ id:135, pId:13, name:"浠水县"},
			{ id:136, pId:13, name:"罗田县"},
			{ id:137, pId:13, name:"英山县"},
			{ id:2, pId:0, name:"湖南省", open:true},
			{ id:21, pId:2, name:"长沙市", open:true},
			{ id:211, pId:21, name:"芙蓉区"},
			{ id:212, pId:21, name:"天心区"},
			{ id:213, pId:21, name:"岳麓区"},
			{ id:214, pId:21, name:"开福区"},
			{ id:22, pId:2, name:"株洲市"},
			{ id:221, pId:22, name:"天元区"},
			{ id:222, pId:22, name:"荷塘区"},
			{ id:223, pId:22, name:"芦淞区"},
			{ id:224, pId:22, name:"石峰区"},
			{ id:23, pId:2, name:"湘潭市"},
			{ id:231, pId:23, name:"雨湖区"},
			{ id:232, pId:23, name:"岳塘区"},
			{ id:233, pId:23, name:"湘乡市"},
			{ id:234, pId:23, name:"韶山市"}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#baseTree"), setting, zNodes);
		});

		/**
		 * 删除选中的子节点
		 */
		function removeNodes()
		{
		    var treeObj = $.fn.zTree.getZTreeObj("baseTree");
		    //选中节点
			var nodes = treeObj.getSelectedNodes();
			for (var i=0, l=nodes.length; i < l; i++)
			{
			    //删除选中的子节点
				treeObj.removeChildNodes(nodes[i]);
			}
		}
		//-->
	</script>
 </head>

<body>
<div class="content_wrap">
	<div class="zTreeDemoBackground left" style="text-align: center;">
		<ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>
		<input type="button" id="btn" onclick="removeNodes()" value="删除子节点"/>
	</div>
</div>
</body>
</html>

2、实现结果

（1）初始化

（2）选择“武汉”，然后单击“删除子节点”

（3）选择“武汉市”，然后单击“删除子节点”，不能再删除子节点

3、源码说明

//删除选中的子节点

    treeObj.removeChildNodes(nodes[i]);

zTree实现删除树子节点的更多相关文章

  1. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  2. Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

  3. Trie树子节点快速获取法

    今天做了一道leetcode上关于字典树的题:https://leetcode.com/problems/word-search-ii/#/description 一开始坚持不看别人的思路,完全自己写 ...

  4. (转载)Javascript removeChild()不能删除全部子节点的解决办法

    在Javascript中,只提供了一种删除节点的方法:removeChild().removeChild() 方法用来删除父节点的一个子节点. 语法: parent.removeChild(thisN ...

  5. zTree怎么判断树有节点展开或者完全关闭的

    树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...

  6. C++求树子节点权重最大的和

    #include <iostream> #include <vector> using namespace std; int n; const int MaxN = 1e5; ...

  7. jquery zTree 查找所有的叶子节点

    jquery zTree 查找所有的叶子节点 // 保存所有叶子节点 10 为初始化大小,并非数组上限 var arrayObj = new Array([10]); /* treeNode: 根节点 ...

  8. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  9. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

随机推荐

  1. flex基本概念

    基本使用 任何一个容器都可以指定为flex布局 .box { display: flex; } 行内元素也可以使用flex .box { display: inline-flex; } Webkit内 ...

  2. 禁掉或启用firefox 的 javascript 脚本

    老版本的firefox可以直接在“选项”页设置启用或禁用javascript 脚本 新版的Firefox中,我找了半天,没有找到,看来是没法直接设置了 于是在 地址栏键入 about:config 搜 ...

  3. cdh版本的hue安装配置部署以及集成hadoop hbase hive mysql等权威指南

    hue下载地址:https://github.com/cloudera/hue hue学习文档地址:http://archive.cloudera.com/cdh5/cdh/5/hue-3.7.0-c ...

  4. Exchanger

    Exchanger可以在两个线程之间交换数据,只能是2个线程,不支持更多的线程之间互换数据. 当线程A调用Exchange对象的exchange()方法后,他会进入阻塞状态,直到线程B也调用了exch ...

  5. BZOJ 4698: Sdoi2008 Sandy的卡片 [后缀自动机]

    4698: Sdoi2008 Sandy的卡片 题意:差分后就是多个串LCS SAM+map大法好 模板打错 智力-2 #include <iostream> #include <c ...

  6. BZOJ 3881: [Coci2015]Divljak [AC自动机 树链的并]

    3881: [Coci2015]Divljak 题意:添加新文本串,询问某个模式串在多少种文本串里出现过 模式串建AC自动机,考虑添加一个文本串,走到的节点记录下来求树链的并 方法是按dfs序排序去重 ...

  7. SDN第四次作业

    作业链接 1.阅读 了解SDN控制器的发展 http://www.sdnlab.com/13306.html http://www.docin.com/p-1536626509.html 了解ryu控 ...

  8. 从Myeclipse到Intelj Idea

    前言:经历了从eclipse到Myeclipse的时间,大学时候用Eclipse,开始工作的时候选择Myeclipse,都能体会到Java的IDE的先进和高明之处,直到最近,公司项目采git和Grad ...

  9. phpstorm使用之——常用快捷键

    phpstorm使用之--常用快捷键 使用IDE的根本所在乃是为了提高工作效率. windows下phpstorm的快捷键 ctrl+shift+n查找文件 ctrl+shift+f 在一个目录里查找 ...

  10. Visual Studio 2017 Enterprise 发布 15.4 版本，离线安装包百度网盘下载。

    Visual Studio 2017 于2017年10月13日发布 15.4 版本.该版本包含多项生产力改进,支持 .NET Standard 2.0 ,并且可以开启 Xamarin Live Pla ...