zTree实现更新根节点中第i个节点的名称

news/2024/7/24 12:33:50 标签: javascript

zTree实现更新根节点中第i个节点的名称


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:"石峰区"}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#baseTree"), setting, zNodes);
		});
		
		/**
		 *  更新根节点中第i个节点的名称
		 */
		function updateNodes()
		{
		    var treeObj = $.fn.zTree.getZTreeObj("baseTree");
		    //获取节点
			var nodes = treeObj.getNodes();
			if (nodes.length>0) 
			{
			    for(var i=0;i<nodes.length;i++)
			    {
			        // 更新根节点中第i个节点的名称
			        nodes[i].name = "省份名称";
					treeObj.updateNode(nodes[i]);
			    }
			}
		}
		//-->
	</script>
 </head>

<body>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>
		<input type="button" id="btn" οnclick="updateNodes()" value="更新根节点中第i个节点的名称"/>
	</div>
</div>
</body>
</html>

2、设计结果

(1)初始化



(2)单击按钮后



3、设计说明

// 更新根节点中第i个节点的名称
nodes[i].name = "省份名称";
treeObj.updateNode(nodes[i]);



http://www.niftyadmin.cn/n/1306176.html

相关文章

B+树的Java实现(B+ Tree)

B树 B Tree 定义 B树是一种多路平衡查找树,是对B树(B-Tree)的扩展. 首先,一个M阶的B树的定义为: 每个节点最多有M个子节点&#xff1b;每一个非叶子节点&#xff08;除根节点&#xff09;至少有ceil(M/2)个子节点&#xff1b;如果根节点不是叶子节点&#xff0c;那么至少有两…

利用PowerDesigner15在win7系统下对MySQL 进行反向工程(一)

利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1、首先&#xff0c;安装以下的驱动 2、找到“C:\Windows\System32” 3、双击“odbcad32.exe” 4、选择“系统DSN”&#xff0c;并单击“添加” 5、创建新数据源 6、选择“MySQL Connector/ODBC5.00.11” 7、填写好MySQL驱…

可扩展哈希 ExtendibleHash Java实现

可扩展哈希 ExtendibleHash 定义 扩展哈希是动态哈希的一种&#xff0c;以下定义摘自维基百科[4] 。 Extendible hashing is a type of hash system which treats a hash as a bit string and uses a trie for bucket lookup.[1] Because of the hierarchical nature of the …

利用PowerDesigner15在win7系统下对MySQL 进行反向工程(二)

利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1、打开PowerDesigner&#xff0c;建立新模型&#xff0c;选择Physical Data Model中的Physical Da.. 2、DBMS选择“MySQL5.0”&#xff0c;单击“OK”&#xff1b;选择“数据库--》Connect...” 3、选择(一)中配置的数据…

利用PowerDesigner15在win7系统下对MySQL 进行反向工程(三)

利用PowerDesigner15在win7系统下对MySQL 进行反向工程 1、选择“数据库--》Generate Database...”&#xff0c;查看数据库表的SQL语句 2、找到“Preview”&#xff0c;查看SQL语句

My97DatePicker日历控制按日、按周和按月选择

My97DatePicker日历控制按日、按周和按月选择 1、设计源码 <% page language"java" import"java.util.*" pageEncoding"UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head&…

生日快乐网站模板(个人制作)(HTML5+CSS3+JS)

哈&#xff0c;前一阵子一个比较要好的朋友过生日&#xff0c;就给她做了一个网站作为生日祝福。也花了挺多的时间去复习了抛弃了有一段时间的HTML和CSS&#xff0c;又去学习了CSS3。最后做出来的效果自己还是挺满意的&#xff0c;因此在这里放出来&#xff0c;也希望能帮助到大…

JavaScript获取路径

JavaScript获取路径 1、设计源码 <% page language"java" import"java.util.*" pageEncoding"UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>JavaScri…