wabacus 集成ztree

lgwt9829

浏览: 18069 次
性别:
来自: 武汉

最近访客更多访客>>

lp164042318

guorui0511

ak23173969

liush0412

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

wabacus

wabacus自身强大的功能及快速开发的效率毋庸置疑！与各种插件的融合性也非常棒！虽然其自身提供的gridtree非常好用，但还是有更常见的需求要求在页面上用树这种形态来展示导航数据。而网络上充斥着各种好用的树的组件，下面已基于jquery开发的ztree组件为例，展示一下如何将ztree组件融合到wabacus_demo中，并起到是了数据导航的作用。

1.首先，将ztree需要的js包及css文件加载到项目中。如下图：
把这些js文件copy到WebRoot\wabacusdemo\js\下面

同样把css文件copy到WebRoot\wabacusdemo\css下面

2.编写一个ztree.html（jsp），将它页面放在WebRoot\wabacusdemo\jsp\tagpages\下面。

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - Standard Data </TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!--引用文件 -->
	<link rel="stylesheet" href="../../css/demo.css" type="text/css">
	<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/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 = {	
			callback: {
				/* 点击节点，执行回调函数 */
				onClick: zTreeOnClick,
			},
			data: {
				simpleData: {
					enable: true
					}
				}
		   };
		
		/* 树节点信息，这是json格式，网上一堆从数据库转化成json格式的代码，自行编写。 */
		var zNodes =[
		             /* 每个node中加了一个cs的自定义参数cs，目的就是传入到右侧ifream中查询条件中的值。 */
		 			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
		 			{ id:11, pId:1, name:"父节点11 - 折叠"},
		 			{ id:111, pId:11, name:"叶子节点111" , cs:"001"},
		 			{ id:112, pId:11, name:"叶子节点112", cs:"002"},
		 			{ id:113, pId:11, name:"叶子节点113", cs:"003"},
		 			{ id:114, pId:11, name:"叶子节点114", cs:"004"},
		 			{ id:12, pId:1, name:"父节点13 - 没有子节点", isParent:true}
		 		];
		 
		/*  点击节点执行方法，主要是更改ifream中src的值 */
		function zTreeOnClick(event, treeId, treeNode) {
		    document.getElementById('sampleframe').src='/WabacusDemo/ShowReport.wx?PAGEID=editablelistreportpage1&txtdeptno='+treeNode.cs+'';
		};
		
		/* 初始化树 */
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		//-->
	</SCRIPT>
</HEAD>

<BODY>
<h1>最简单的树 </h1>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div class="right">
		<iframe id="sampleframe" name="sampleframe" width="100%" height="99%" frameborder="0" src="/WabacusDemo/ShowReport.wx?PAGEID=editablelistreportpage1" style="border: 0px solid #cecece;"></iframe>
	</div>
</div>
</BODY>
</HTML>

3.然后在浏览器中访问即可了http://localhost:8080/WabacusDemo/wabacusdemo/jsp/tagpages/ztree.html

4.主要思路：
首先，设计界面，两个div左右排列，左侧div展示树，右侧div嵌套个ifream来展示wabacus提供的数据reprot
其次，给树的node上绑定参数cs，让这个参数传递给右侧ifream中wabacus report中的查询条件字段txtdeptno
最后，通过点击node执行回调函数，重写ifream中的src属性的值，实现数据导航。

5.有待改进：
能不能直接把参数传递给ifream中的report，而不是重写src
树是通过写死的json来展现的，而不是查询数据库转换成json代码[/size]