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]
- 大小: 48.7 KB
- 大小: 13.5 KB
- 大小: 109.7 KB
分享到:
相关推荐
开箱即用的ztree封装:右键事件、拖动节点、一键展开关闭节点、windows风格图标等等
js集成zTree实现树形结构菜单
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
ztree脚本、ztree下载、包含ztree文件、ztree的pdf教程、ztree的chm教程
zTree -- jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
zTree组件api,官方可用chm版(zTree api)
ztree使用说明
前端框架ztree前端框架ztree
基于最新版本ztree而开发的下拉树插件,还拥有搜索功能
最新版的ztree插件源码zTree-zTree_v3.5.17!
Ztree+treeTable实现 Java实现 树形菜单 树形表格 有丰富的实例 和官方开发文档,也有官方api 不懂的可以查询官方api,实现很简单,按照实例做就可以
非常好看的ztree样式,可以使用不同图标,可以兼容IE6,Hunter's Home zTree in Google zTree 功能演示 基本功能演示 不兼容 IE6 兼容 IE6 check 演示 CheckBox演示 Radio演示 异步加载演示 事件演示 编辑演示 默认...
ztree官网参考文档,及对应的demo可以参考学习ztree树是如何实现的
里面三个压缩包的代码,ztree filter demo ztree的一些代码,供写ztree的人查看使用。
树形菜单js包,zTree 内含各种demo演示,需要zTree的朋友可以下载,java
zTreeAPI_v2.5,树结构,zTree使用文档
ztree3.5中文API文档
zTree实现权限分配所需的,来自于ztree官网,可自行去ztree官网下载
本实例详细讲述了如何通过zTree实现满足项目需求Tree数据分层显示要求,通过zTree灵活的自定义属性,轻松完成Tree的改造