首先提供Ztree官方网站http://www.ztree.me。
Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。
1、首先看数据库中的数据:
其中CLASSCODE,TRADECODE,CLASSLEVEL与Ztree的实现无关。
CLASSID:每个树节点自己的ID
CLASSNAME:顾名思义
TERMINATED:末端代号,用以判断是否为叶子节点(末节点)
PARENT:该节点的父节点ID
2、SQL:
工程使用的是oracle+ibatis,其查询语句如下。
(1)resultClass="hashmap"是指以hashmap类型返回查询结果
(2)isNotEmpty和isEmpty是ibatis的东西,顾名思义,满足哪个条件,就执行哪条语句。
【<span style="white-space: pre;"> </span>】下面这条语句莫名其妙多出来的,编辑不掉,当其不存在即可。
<select id="etpTradeZTree" resultClass="hashmap">
select t.className as "name",
t.classId as "id" ,
t.parent as "pId",
t.terminated as "leaf"
from t_com_trade t
where 1 = 1
<isNotEmpty property="parent">
and t.parent = #parent#
</isNotEmpty>
<isEmpty property="parent">
and t.parent is null
</isEmpty>
</select>
3、后台JAVA实现:
(1)ServiceImpl查出来的结果,放入一个List:
queryForList是ibatis提供的方法,获取数据库数据后,返回一个List类型的结果集。
public List ztreeEtpTrade(Long parent) {
List list = treeDao.queryForList("common-selector.etpTradeZTree", "parent", parent);
return list;
}
(2)在Action中,得到上面那个List,封装成Ztree需要的json格式后,再由action传到前台JSP。
每一次前台的点击,都会执行一次action获取数据,即实现了异步读取数据。
其中需要注意的是,我们调用SQL取数据的时候,需要给其一个参数parent,用以判断是否为父节点(根节点)。
$LongNull是封装在框架中的,其实就是request。
public void ztreeEtpTrade(){
Long parent = $LongNull("id");//从前台传过来的,用来判断父节点
if(parent!=null && parent == 0){
parent = null;
}
List treeTrade = this.getCommonSelectorService().ztreeEtpTrade(parent);
String json = JsonUtil.getJson(treeTrade);//变量json传给前台
super.renderJson(json);
}
4、前台JSP:
<script/>标签内:可参考Ztree官方API查看各个属性的作用:http://www.ztree.me/v3/api.php
(1)下面的代码,都是按照Ztree官方实例的结构来写的,我也只是明白了90%左右,主要还是settingTrade里面的配置。
var treeTrade;
var settingTrade = {
data: {
simpleData: {
enable : true,
idKey : "id",
pIdKey : "pId"
}
},
async: {
enable: true,
url:"${base}/common/selector/ztreeEtpTrade.action",
autoParam:["id"],
dataFilter: filter
},
callback: {
onClick: onClickTrade
}
};
function Node(id, pId, name, isParent){
this.id = id;
this.pId = pId;
this.name = name;
this.isParent = isParent;
};
function filter(treeId, parentNode, childNodes) {
var filterNodes = new Array()
if (!childNodes) return null;
var isParent;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
if(childNodes[i].leaf==0){
isParent = true;
filterNodes.push(new Node(childNodes[i].id, childNodes[i].pId, childNodes[i].name, isParent));
}else{
isParent = false;
filterNodes.push(new Node(childNodes[i].id, childNodes[i].pId, childNodes[i].name, isParent));
}
}
return filterNodes;
};
function onClickTrade(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeTrade"),
nodes = zTree.getSelectedNodes(),
tradeName = "";
tradeId = "";
nodes.sort(function compare(a,b){return a.id-b.id;});
for (var i=0; i<nodes.length; i++) {
tradeId += nodes[i].id + ",";
tradeName += nodes[i].name + ",";
}
if (tradeId.length > 0 ) tradeId = tradeId.substring(0, tradeId.length-1);
if (tradeName.length > 0 ) tradeName = tradeName.substring(0, tradeName.length-1);
var tradeIdObj = $("#tradeId");
var tradeNameObj = $("#tradeName");
tradeIdObj.attr("value", tradeId);
tradeNameObj.attr("value", tradeName);
};
function showMenuTrade() {
var treeNodes = new Array();
var tradeObj = $("#tradeName");
var tradeOffset = $("#tradeName").offset();
$("#tradeContent").css({
left:0/*tradeOffset.left + "px"*/,
top:/*tradeOffset.top + */tradeObj.outerHeight() + "px"}).slideDown("fast");
$("body").bind("mousedown", onBodyDownTrade);
$.ajax({
url : "${base}/common/selector/ztreeEtpTrade.action",
type : "post",
async : true,
dataType: "json",
success : function(data){
var isParent;
$.each(data, function(i, item){
if(item.leaf==0){
isParent = true;
}else{
<input type="hidden" name="etp.tradeId" id="tradeId" readonly="readonly"/>
isParent = false;
};
treeNodes.push(new Node(item.id, item.pId, item.name, isParent));
$.fn.zTree.init($("#treeTrade"), settingTrade, treeNodes);
});
}
});
};
function hideMenuTrade() {
$("#tradeContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDownTrade);
};
function onBodyDownTrade(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "tradeContent" || $(event.target).parents("#tradeContent").length>0)) {
hideMenuTrade();
}
};
JSP的HTML:
<input type="text" name="etp.tradeName" id="tradeName" readonly="readonly"/>
<div class="zTreeDemoBackground left">
<ul class="list">
<li id="tradeContent" class="menuContent" style="position:absolute;left:0;top:-10px;z-index:800;background:#fff;border-left:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;display:none;">
<ul id="treeTrade" class="ztree" style="width:164px;"></ul>
</li>
</ul>
</div>
<input type="button" name="tradeBtn" value="选 择" id="tradeBtn" onclick="showMenuTrade(); return false;"/>
5、操作示例
(1)点击“选择”按钮,效果图如下:
后台action的过程:
会给parent传一个null值,执行SQL取数据,当传到action,数据如下(参照action代码)。
treeTrade的值:[{id=1, pId=null, name=生产企业, leaf=0}, {id=2, pId=null, name=流通企业, leaf=0}]
json的值:[{"id":1,"pId":null,"name":"生产企业","leaf":0},{"id":2,"pId":null,"name":"流通企业","leaf":0}]
(2)点击“生产企业”旁的加号,加载其孩子。
后台action的过程:
此次给parent传的值是1(“生产企业”的CLASSID)。
treeTrade的值:[{id=3, pId=1, name=药品生产企业, leaf=1}, {id=7, pId=1, name=保健品生产企业, leaf=1}]
json的值:[{"id":3,"pId":1,"name":"药品生产企业","leaf":1},{"id":7,"pId":1,"name":"保健品生产企业","leaf":1}]
所有代码都在上面了,不可能每行代码都解析清楚,我也是新人,多多指导交流。
1、先明白数据库的数据结构。
2、要想自己掌握的话,还是要靠自己一行一行代码去Google、百度,API。
3、除了Iteye,ztree在百度贴吧也有阵营,也可以去瞧瞧。http://tieba.baidu.com/f?kw=ztree
4、推荐一篇文章:这些年我们爱犯的弱智错误(菜鸟必看)
- 大小: 33.6 KB
- 大小: 5.4 KB
- 大小: 7.8 KB
分享到:
相关推荐
网上总结了很多相关的资源 做了一个小的ztree的demo 可以实现拖拽,点击,右击事件 也有何数据库相应的交互 资源包括完整的项目源码 和数据库建表语句 供大家参考
ztree连接数据库的一些增删该查
ztree异步加载demo,ztree异步加载demo.ztree异步加载demo
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
前端框架 zTree 从数据库中动态加载树形菜单前端框架
jquery ztree 异步加载 延迟加载效果
ztree 异步加载 拖拽 右键菜单 功能
用springMVC和mysql,实现了一个简单的zTree异步加载例子,希望可以帮到更多的人。。。
Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下,或许对你学习ztree有所帮助
原来整理的zTree异步加载的应用例子,很多朋友需要,就放到这里了。
jquery ztree 异步动态加载部署直接运行,大数据量,异步是很好的处理方式
一个Ztree异步分批加载demo,只有前台代码,后台只需要提供分页查询,然后页码自动增长即可。
主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例,感兴趣的小伙伴们可以参考一下
本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns=...
前段时间由于项目需要,看了一下ztree,真的很好用,这个项目需要加载几万条的节点数据,如果用一次性加载的方式性能大大的降低了,借助ztree3.1插件写了个异步加载的树。感谢ztree!
asp.net mvc4 ztree 连接数据库 动态生成菜单简单demo
ztree实现异步加载,使用java语言