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: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.removeNode(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、说明

treeObj.removeNode(nodes[i]);

删除选中的节点

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

  1. zTree实现删除树子节点

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

  2. 如何自定义修改ztree树节点的图标

    1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...

  3. zTree变异篇：如何让同级树节点平铺而非垂直显示

    昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:   通过在浏览器调试模式下观察其同级节点的css为: 这个dis ...

  4. Ztree树节点应用

    树节点增删改查: 前台jsp页面: <% String root=request.getContextPath();//获取项目目录 %> <SCRIPT type="te ...

  5. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...

  6. 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  7. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  8. 【zTree】zTree展开树节点

    今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法: /** * 展开树节点的第一层 */ function openFirstTreenode(){ // 获取树对象 var tr ...

  9. 【ztree】zTree取消树节点选中的背景色

    点击树节点的时候是ztree给树加了个class:    curSelectedNode 所以最简单的清除树节点的背景色的方法是移除其有背景色的class: $(".curSelectedN ...

随机推荐

  1. ABP官方文档翻译 8.1 通知系统

    通知系统 介绍 发送模型 通知类型 通知数据 通知严重性 关于通知持久化 订阅通知 发布通知 用户通知管理 实时通知 客户端 通知存储 通知定义 介绍 在系统中通知用来基于特定的事件告知用户.ABP提 ...

  2. HDU 3374 String Problem

    最大最小表示法与KMP求循环节 最大最小表示法 最大最小表示法与KMP求循环节的模板题, #include <iostream> #include <cstdio> #incl ...

  3. python实现HOG+SVM对CIFAR-10数据集分类（上）

    本博客只用于学习,如果有错误的地方,恳请指正,如需转载请注明出处. 看机器学习也是有一段时间了,这两天终于勇敢地踏出了第一步,实现了HOG+SVM对图片分类,具体代码可以在github上下载,http ...

  4. php 处理并发问题

    对于商品抢购等并发场景下,可能会出现超卖的现象,这时就需要解决并发所带来的这些问题了 在PHP语言中并没有原生的提供并发的解决方案,因此就需要借助其他方式来实现并发控制. 方案一:使用文件锁排它锁 f ...

  5. 揽货最短路径解决方案算法 - C# 蚁群优化算法实现

    需求为(自己编的,非实际项目): 某配送中心进行揽货,目标客户数为50个客户,配送中心目前的运力资源如下: 现有车辆5台 单台运力最大行驶距离200千米 单台运力最大载重公斤1吨 问:运力怎样走法才能 ...

  6. eslint 入门项目搭建过程

    github 地址 : https://github.com/gebin/eslint-demo 运行该项目 npm install npm start 访问 http://localhost:900 ...

  7. EF数据迁移，未将对象引用设置到对象实例

    现象: 执行Enable-Migrations -force时就报"未将对象引用设置到对象实例"的异常: DbProviderServicesExtensions.GetProvi ...

  8. JVM性能监控与故障处理命令汇总（jps、jstat、jinfo、jmap、jhat、jstack）

    给一个系统定位问题的时候,知识.经验是关键基础,数据是依据,工具才是运用知识处理数据的手段 使用适当的虚拟机监控和分析的工具可以加快我们分析数据.定位解决问题的速度,本文主要介绍了几款服 务器上常用的 ...

  9. IM开发基础知识补课：正确理解前置HTTP SSO单点登陆接口的原理

    1.前言 一个安全的信息系统,合法身份检查是必须环节.尤其IM这种以“人”为中心的社交体系,身份认证更是必不可少. 一些PC时代小型IM系统中,身份认证可能直接做到长连接中(也就是整个IM系统都是以长 ...

  10. Java上传Excel并解析

    1.上传: public String uploadFile(CommonsMultipartFile file,String uploadPath,String realUploadPath){ I ...