wabacus 集成ztree

最新推荐文章于 2024-07-24 11:38:03 发布

lgwt9829

最新推荐文章于 2024-07-24 11:38:03 发布

阅读量120

点赞数

分类专栏： wabacus 文章标签： json javascript 数据库 ViewUI

本文链接：https://blog.csdn.net/lgwt9829/article/details/84411144

版权

wabacus 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

[img]http://dl.iteye.com/upload/attachment/0082/0359/9cce69cf-d612-36d7-a388-4747d6ea705c.jpg[/img]

[size=large]同样把css文件copy到WebRoot\wabacusdemo\css下面[/size]

[img]http://dl.iteye.com/upload/attachment/0082/0361/dbacc5f9-93e6-3163-8e09-5c3618886d04.jpg[/img]

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


<!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>

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

[/size]
[img]http://dl.iteye.com/upload/attachment/0082/0367/1d97c381-87a9-36b8-9345-de7d041e0906.jpg[/img]

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

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

lgwt9829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wabacus 集成ztree

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

扫一扫