?zTree相对讲有非常好的API文档，扩展性强，使用起来比较方便。本文章主要填补下网络上zTree例子太少的空白。
实现方式：struts2 java类编写。比较灵活，可以根据我的方法实现servletRequestAware，然后在request.setAttribute()将值传入页面，也可以set ,get，传入对象为自己拼写的类似json，其实是字符串数组形式的变量。根据我的写法，传到页面后用一个标签<input type="hidden" value=${所传字符串数组} id="sNodes">
,在js中取到这个值$("#sNodes").val();当然再将这个字窜数组转化为json格式就可以了eval('('+刚才的取值+')');
为了让ztreejs读懂我们值
节点id,父节点id，显示内容name.然后根据这些字段会自动展现为树：
在setting变量中初始化就可以了：
setting1 = {
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
checkable : true,
checkStyle : "radio",
checkRadioType : "all",
callback: {
change: zTreeOnChange
}
};
缺点：没有实现异步加载，一次读入所有节点，对于大数据量，页面加载可能有点慢?。节点数控制在1000以内。
下面是代码
?
1，jsp内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ page language="java" import="java.util.*" contentType="text/html;charSet=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%String path=request.getContextPath(); %>
<% List yhdNodes=(List<String>)request.getAttribute("yhdNodes");
List oppoNodes=(List<String>)request.getAttribute("oppoNodes");
%>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO </TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=path%>/js/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=path%>/js/ztree/jquery.ztree-2.6.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/local/match/viewCategoryMappingInfoDetail.js"></script>
</HEAD>
<BODY>
<center class="headTitle">目录映射</center>
<TABLE border=0 width="100%" class="tb1" align="center">
<tr align="center">
<td align=right valign=top width="45%">
<input id="yhdNodes" type="hidden" value="<%=yhdNodes %>">
<input id="path" type="hidden" value="<%=path%>">
<div style="height:45px;background-color:blue;width:222px;text-align:center"><h1>一号店目录</h1></div>
<div class="zTreeCategoryBackground">
<ul id="yhdTree" class="tree"></ul>
</div>
</td>
<td width="10%"><input type="button" value="保存目录关系" onclick="saveMatchedRelations();"></td>
<td align=left valign=top width="45%">
<input id="oppoNodes" type="hidden" value="<%=oppoNodes %>">
<input id="oppoSiteId" type="hidden" value="<s:property value='matchDto.siteId'/>">
<div style="height:45px;background-color:blue;width:222px;text-align:center"><h1><s:property value="matchDto.siteId"/>目录</h1></div>
<div class="zTreeCategoryBackground">
<ul id="oppoTree" class="tree"></ul>
</div>
</tr>
</TABLE>
</BODY>
</HTML>
?2，js
$(function() {
$("input[type=button]").css("font-size","11px").css("border-radius","4px 4px 4px 4px").css("padding","0.4em 1em").css("font-family", "Verdana,Arial,sans-serif");
refreshTree1();
refreshTree2();
});
var zTree1;
var zTree2;
var setting;
//var zTreeObj = zTree(setting, zTreeNodes);
//var nodes = zTreeObj.getCheckedNodes(); //或 zTreeObj.getCheckedNodes(true);
setting1 = {
isSimpleData : true, //采用id,pid,name三个参数来初始树需要加入的参数
treeNodeKey : "id",
treeNodeParentKey : "pId",
checkable : true,
checkStyle : "radio",
checkRadioType : "all",
callback: {
change: zTreeOnChange//当节点内容有变化时产生事件的函数
}
};
setting2 = {
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
checkable: true
};
function zTreeOnChange(event, treeId, treeNode) {
var path=$("#path").val();
var nodes = zTree1.getCheckedNodes();
if(nodes.length!=0){
var myUrl=path+"/match/getMathedOppoCategory.action";
$.ajax({ //因为不清楚zTree客服端服务器端异步交互用到技术，就用jquery先上了
url :myUrl,
data: "matchDto.yhdId="+treeNode.id+"&matchDto.siteId="+$("#oppoSiteId").val(),
cache : false,
async : false,
type : "POST",
dataType : 'html',
success : function (data){
result=data;
}
});
var arrResult=result.split(":");
if(arrResult.length>0){
for(var i=0;i<arrResult.length;i++){
if(arrResult[i]!=""&&arrResult[i]!=null){
var node=zTree2.getNodeByParam("id",arrResult[i]);
node.checked=true;
zTree2.expandNode(node,true,true);
zTree2.updateNode(node, true);
}
}
}
}
}
function getCheckBoxType() {
var type = { "Y":"", "N":""};//点击checkbox或者取消时是否对子节点checkbox产生影响ps
return type;
}
function refreshTree1() {//页面第一次加载时将某棵树进行初始化
var sNodes;
sNodes=$("#yhdNodes").val(); //从页面jsp中取得树节点信息，当前为list<String>
sNodes=eval('('+sNodes+')'); //转化为json格式数据
var checkType = getCheckBoxType(); //获得页面checkbox级联选中还是非级联等
zTree1 = $("#yhdTree").zTree(setting1,sNodes); //此处为初始化页面瓶颈，时间较长
$("#checkTypeCode").html("{\"Y\":" + checkType.Y + ", \"N\":" + checkType.N + "}");
}
function refreshTree2() {
var sNodes;
sNodes=$("#oppoNodes").val();
sNodes=eval('('+sNodes+')');
var checkType = getCheckBoxType();
setting2.checkType = checkType;
zTree2 = $("#oppoTree").zTree(setting2,sNodes);
$("#checkTypeCode").html("{\"Y\":" + checkType.Y + ", \"N\":" + checkType.N + "}");
}
function saveMatchedRelations(){
var path=$("#path").val();
var nodes1 = zTree1.getCheckedNodes();
var nodes2= zTree2.getCheckedNodes();
var targetStr="";
for(var i=0;i<nodes2.length;i++){
targetStr+=nodes2[i].id+";";
}
window.location=path+"/match/saveMatchedRelations.action?matchDto.yhdId="+nodes1[0].id+"&matchDto.siteId="+$("#oppoSiteId").val()+"&targetStr="+targetStr;
}
?
3,action
public String getCategoryMappingInfoDetail(){
try {
yhdCategoryList=yhdCategoryService.getAllYhdCategory();
List yhdNodes=new ArrayList();
for (YhdCategory o : yhdCategoryList) {
yhdNodes.add("{'id':"+o.getId()+",'name':'"+o.getCategoryName().replaceAll(" ","")+"','pId':"+o.getCategoryParenId()+"}");
}
opponentCategoryList=pisTCategoryService.getListCategoryBySiteId(matchDto.getSiteId());
List oppoNodes=new ArrayList();
for (PisTCategory o : opponentCategoryList) {
oppoNodes.add("{'id':"+o.getId()+",'name':'"+o.getCategoryName().replaceAll(" ","")+"','pId':"+o.getParentId()+"}");
}
request.setAttribute("yhdNodes", yhdNodes);
request.setAttribute("oppoNodes", oppoNodes);
} catch (Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
?
1 楼
hotsmile
2012-05-11
不错，学习了。。。
2 楼
ycq__110
2012-05-15
http://help.github.com/win-set-up-git/