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. vsftp实现只能上传不能下载、删除权限配置

    vsftpd可以对每个用户特别限制.只要给那个用户建立一个设置文件,然后在文件里设置 在vsftpd.conf里加user_config_dir=/etc/vsftpd/vsftpd_user_con ...

  2. ansible playbook实践(一)-基础环境安装

    1 介绍 Ansible 是一个系统自动化工具,用来做系统配管理,批量对远程主机执行操作指令. 2 实验环境 ip 角色 192.168.40.71 ansible管控端 192.168.40.72 ...

  3. spring boot + vue + element-ui全栈开发入门——windows开发环境

     一.node.js开发环境 windows系统,去网站https://nodejs.org/en/download/,下载对应的安装程序,并安装Windows Installer (.msi) 接下 ...

  4. 【Tomcat】Tomcat的使用

    第一章 JDK的安装 1.1  windows下安装 1.1.1  配置环境变量 安装完成后,还要进行 Java 环境的配置,才能正常使用,步骤如下: (1)在我的电脑点击右键——〉选择属性, (2) ...

  5. 深入理解Java内存模型之系列篇[转]

    原文链接:http://blog.csdn.net/ccit0519/article/details/11241403 深入理解Java内存模型(一)——基础 并发编程模型的分类 在并发编程中,我们需 ...

  6. UOJ#219. 【NOI2016】优秀的拆分 [后缀数组 ST表]

    #219. [NOI2016]优秀的拆分 题意:求有多少AABB样子的子串,拆分不同的同一个子串算多个 一开始一直想直接求,并不方便 然后看了一眼Claris的题解的第一行就有思路了 如果分开,求\( ...

  7. HDU 3689 Infinite monkey theorem [KMP DP]

    Infinite monkey theorem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  8. C primer Plus_part6

    第十章  数组和指针 1.const :保护变量不受改变,特别是在作为入参传入函数 对于变量:const 不能修改值 对于指针: const 可以修改值,但是不能修改指向对象 #include< ...

  9. 基于Java的WebSocket推送

    WebSocket的主动推送 关于消息推送,现在的解决方案如轮询.长连接或者短连接,当然还有其他的一些技术框架,有的是客户端直接去服务端拿数据. 其实推送推送主要讲的是一个推的概念,WebSocket ...

  10. 12小时格式Xcode的-在一个“TimePicker”24 NSDate的设置

    我正在使用的NSDate对象,和好了,我的iPhone与24小时格式,所以当我在测试我的应用程序,一切正常,但是,我的一个朋友试图在他的iPhone上的应用程序 CodeGo.net,但12小时格式, ...