求指导，怎么在一个页面上放两颗ZTREE。。。

灬达果 2013-05-29 10:46:47
代码如下，然后结果是，有两棵树，但是两棵树一样，都是类别的那棵树，怎么才能区分两个树，让他们各显示各的树呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>



<link rel="stylesheet" href="$link.getContextURL()/manager/css/main.css" type="text/css" />

<link href="$link.getContextURL()/manager/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />

<link href="$link.getContextURL()/common/css/right.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="$link.getContextURL()/common/script/jquery-1.7.2.js"></script>



<script type="text/javascript" src="$link.getContextURL()/manager/js/ui.js"></script>

<script type="text/javascript" src="$link.getContextURL()/manager/js/main.js"></script>

<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree-3.2.js"></script>



    </head>

<div style="float:left;width:50%">

			<script>

		

			var setting = {

				treeId:"moduleTree",

			view: {

				selectedMulti: false

					},

			async: {

				enable: true,

				url:"modulecatalog",

				autoParam:["id"]

					},	

			data: {

				simpleData:

							{

				enable: true,

				idKey: "id",

				pIdKey: "moduleId",

				rootPId: null

							}

					} ,

			view: {

				expandSpeed: ""

					},

			callback: 

					{

				onAsyncSuccess: onAsyncSuccess,

				onAsyncError: onAsyncError,

				onRightClick: OnRightClick

					}

			};

		

		function OnRightClick(event, treeId, treeNode) {

			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {

				zTree.cancelSelectedNode();

				showRMenu("root", event.clientX, event.clientY);

			} else if (treeNode && !treeNode.noR) {

				zTree.selectNode(treeNode);

				showRMenu("node", event.clientX, event.clientY);

			}

		}

		function showRMenu(type, x, y) {

			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);

		}

		function hideRMenu() {

			if (rMenu) rMenu.css({"visibility": "hidden"});

			$("body").unbind("mousedown", onBodyMouseDown);

		}

		function onBodyMouseDown(event){

			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {

				rMenu.css({"visibility" : "hidden"});

			}

		}

		function beforeExpand(treeId, treeNode) {

			if (!treeNode.isAjaxing) {

				startTime = new Date();

				treeNode.times = 1;

				ajaxGetNodes(treeNode, "refresh");

				return true;

			} else {

				alert("正在下载数据中，请稍后展开节点...");

				return false;

			}

		}

		function ajaxGetNodes(treeNode, reloadType) {

			var zTree = $.fn.zTree.getZTreeObj("moduleTree");

			if (reloadType == "refresh") {

				treeNode.icon = "../../css/zTreeStyle/img/loading.gif";

				zTree.updateNode(treeNode);

			}

			zTree.reAsyncChildNodes(treeNode, reloadType, true);

		}

		function onAsyncSuccess(event, treeId, treeNode, msg) {



		}

		function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

			alert("异步获取数据出现异常。");

		}

		

		

  		var zTree, rMenu;

		$(document).ready(function(){

			 $.fn.zTree.init($("#moduleTree"), setting,null);

			 zTree = $.fn.zTree.getZTreeObj("tree");

			 rMenu = $("#rMenu");

		});

		/**

 		* 接收一个json对象，将它添加到ztree中

 		* @param {} data

 		*/

		function leftFunction(data) {

		//添加树节点方法

		var treeObj = $.fn.zTree.getZTreeObj("tree");

		var node=treeObj.getSelectedNodes()[0];

		var newNode = data;

		newNode = treeObj.addNodes(node, newNode);

		window.top.$.XYTipsWindow.removeBox();

		}

		

</script>

<body>

	<div class="accordion" style="margin: 0px;">

		<h1 class="caption on">

			<a href="javascript:void(0);">选择模块</a>

		</h1>

		<div class="content on">

			<div><ul id="moduleTree" class="ztree"></ul></div>

			

		</div>

	</div>



</body>

	</div>

		<div style="float:left;width:50%">

			<script>

		var setting = {

			treeId:"dscTree",

			view: {

				selectedMulti: false

					},

			async: {

				enable: true,

				url:"dscCatalog",

				autoParam:["id"]

					},	

			data: {

				simpleData:

							{

				enable: true,

				idKey: "code",

				pIdKey: "parentId",

				rootPId: null

							}

					} ,

			view: {

				expandSpeed: ""

					},

			callback: 

					{

				onAsyncSuccess: onAsyncSuccess,

				onAsyncError: onAsyncError,

				onRightClick: OnRightClick

					}

			};

		

		function OnRightClick(event, treeId, treeNode) {

			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {

				zTree.cancelSelectedNode();

				showRMenu("root", event.clientX, event.clientY);

			} else if (treeNode && !treeNode.noR) {

				zTree.selectNode(treeNode);

				showRMenu("node", event.clientX, event.clientY);

			}

		}

		function showRMenu(type, x, y) {

			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);

		}

		function hideRMenu() {

			if (rMenu) rMenu.css({"visibility": "hidden"});

			$("body").unbind("mousedown", onBodyMouseDown);

		}

		function onBodyMouseDown(event){

			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {

				rMenu.css({"visibility" : "hidden"});

			}

		}

		function beforeExpand(treeId, treeNode) {

			if (!treeNode.isAjaxing) {

				startTime = new Date();

				treeNode.times = 1;

				ajaxGetNodes(treeNode, "refresh");

				return true;

			} else {

				alert("正在下载数据中，请稍后展开节点...");

				return false;

			}

		}

		function ajaxGetNodes(treeNode, reloadType) {

			var zTree = $.fn.zTree.getZTreeObj("dscTree");

			if (reloadType == "refresh") {

				treeNode.icon = "../../css/zTreeStyle/img/loading.gif";

				zTree.updateNode(treeNode);

			}

			zTree.reAsyncChildNodes(treeNode, reloadType, true);

		}

		function onAsyncSuccess(event, treeId, treeNode, msg) {



		}

		function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {

			alert("异步获取数据出现异常。");

		}

			//ztree

			var zTree, rMenu;

		$(document).ready(function(){

			 $.fn.zTree.init($("#dscTree"), setting,null);

			 zTree = $.fn.zTree.getZTreeObj("tree");

			 rMenu = $("#rMenu");

		});

		/**

 		* 接收一个json对象，将它添加到ztree中

 		* @param {} data

 		*/

		function leftFunction(data) {

		//添加树节点方法

		var treeObj = $.fn.zTree.getZTreeObj("tree");

		var node=treeObj.getSelectedNodes()[0];

		var newNode = data;

		newNode = treeObj.addNodes(node, newNode);

		window.top.$.XYTipsWindow.removeBox();

		}

		

		

</script>

<body>

	<div class="accordion" style="margin: 0px;">

		<h1 class="caption on">

			<a href="javascript:void(0);">选择类别</a>

		</h1>

		<div class="content on">

			<div><ul id="dscTree" class="ztree"></ul></div>

			

		</div>

	</div>



</body>

		



</div>

</html>

...全文
611 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
xsqsharp 2014-09-18
  • 打赏
  • 举报
 回复
@muding1989,请问你是如何在页面中呈现两个不同的树的内容？ 下面是我页面的写的代码，可是显示还是同样的信息 $(document).ready(function(){ var zNodes = <%=ViewState("_lasyxktree") %>; $.fn.zTree.init($("#treeDemo"), setting, zNodes); $.fn.zTree.init($("#treeDemo1"), setting, zNodes); $.fn.zTree.init($("#treeDemo2"), setting, zNodes); $.fn.zTree.init($("#treeDemo3"), setting, <%=ViewState("_lasyEconomicstree") %>); });
xsqsharp 2014-09-18
  • 打赏
  • 举报
 回复
@muding1989 我就是要这样的效果 请问是如何实现了
stevenpho 2013-12-31
  • 打赏
  • 举报
 回复
我也想问这个问题
muding1989 2013-12-11
  • 打赏
  • 举报
 回复
结贴了吗？是需要这样的双树？
z413015531 2013-10-24
  • 打赏
  • 举报
 回复
引用 4 楼 zhao350404902 的回复:
问题解决了，把setting的名字改了，在init函数里面，把setting也改了，就是两个不同的树了
这样是可以，但是如果你更改了样式，后面的样式也会跟着改变。
灬达果 2013-05-29
  • 打赏
  • 举报
 回复
引用 1 楼 rencht 的回复:
我能说代码的风格很烂么，可以把js部分的代码写一起或是写到js文件里么
我专门写成这样的，区分两个div显示的内容是不同的，本来就显示不出来呢，放到一起更乱
灬达果 2013-05-29
  • 打赏
  • 举报
 回复
我专门写成这样的，区分两个div显示的内容是不同的，本来就显示不出来呢，放到一起更乱
rencht 2013-05-29
  • 打赏
  • 举报
 回复
我能说代码的风格很烂么，可以把js部分的代码写一起或是写到js文件里么
灬达果 2013-05-29
  • 打赏
  • 举报
 回复
问题解决了，把setting的名字改了，在init函数里面，把setting也改了，就是两个不同的树了
在一个页面实现两个zTree联动的方法
最近发现项目中很多地方都是树形菜单，而这些树形菜单都是使用树形插件zTree来制作的，下面这篇文章主要给大家介绍了关于在一个页面实现两个zTree联动的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
ztree节点后面复选下拉框
在ztree节点后面加了个复选下拉框,打开demo/cn/index.html,点击组合功能演示-radio_checkbox_mulitselect 共存节点看效果
SpringMVC+Mybatis+Shiro+Bootstrap实战
快速增长实战经验的课程技术选型：核心框架：Spring Framework 4.X视图框架：Spring MVC 4.X持久层框架：MyBatis 3.X /Mybatis-plus 2.1.8表格插件：Bootstrap Table表单验证插件：BootstrapValidator日期选择插件：Datepicker for Bootstrap数据图表：charts表单美化插件：ICheck树形视图插件：Ztree 数据库       Mysql5+Druid安全框架：Apache Shiro数据库连接池：Druid日志管理：SLF4J、Log4j页面交互：BootStrap、Layer等
基于ztree开发的下拉树控件ztree-select
基于最新版本ztree而开发的下拉树插件，还拥有搜索功能
zTree-zTree_v3.5.17
最新版的ztree插件源码zTree-zTree_v3.5.17！
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章