zoukankan      html  css  js  c++  java
  • zTree实现删除树节点

    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; 200px; overflow-y: auto"></ul>
    		<input type="button" id="btn" οnclick="removeNodes()" value="删除节点"/>
    	</div>
    </div>
    </body>
    </html>

    2、实现结果

    (1)初始化



    (2)点击“汉口”,再单击“删除节点”



    3、说明

    treeObj.removeNode(nodes[i]);
        删除选中的节点

  • 相关阅读:
    POJ3693 Maximum repetition substring —— 后缀数组 重复次数最多的连续重复子串
    SPOJ
    POJ2774 Long Long Message —— 后缀数组 两字符串的最长公共子串
    POJ3261 Milk Patterns —— 后缀数组 出现k次且可重叠的最长子串
    POJ1743 Musical Theme —— 后缀数组 重复出现且不重叠的最长子串
    SPOJ
    AC自动机小结
    HDU3247 Resource Archiver —— AC自动机 + BFS最短路 + 状压DP
    POJ1625 Censored! —— AC自动机 + DP + 大数
    Herding
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315109.html
Copyright © 2011-2022 走看看