ztree多树实现异步交互
2012-07-08 02:05
344 查看
ztree多树实现异步交互
jquerystrutsjsp
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变量中初始化就可以了：
Js代码
setting1 = {
isSimpleData :
true,
treeNodeKey :
"id",
treeNodeParentKey :
"pId",
checkable :
true,
checkStyle :
"radio",
checkRadioType :
"all",
callback: {
change: zTreeOnChange
}
};
缺点：没有实现异步加载，一次读入所有节点，对于大数据量，页面加载可能有点慢 。节点数控制在1000以内。
下面是代码
1，jsp内容
Html代码
<!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
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
Java代码
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;
}
jquerystrutsjsp
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变量中初始化就可以了：
Js代码
setting1 = {
isSimpleData :
true,
treeNodeKey :
"id",
treeNodeParentKey :
"pId",
checkable :
true,
checkStyle :
"radio",
checkRadioType :
"all",
callback: {
change: zTreeOnChange
}
};
setting1 = {
isSimpleData : true,
treeNodeKey : "id",
treeNodeParentKey : "pId",
checkable : true,
checkStyle : "radio",
checkRadioType : "all",
callback: {
change: zTreeOnChange
}
};
缺点：没有实现异步加载，一次读入所有节点，对于大数据量，页面加载可能有点慢 。节点数控制在1000以内。
下面是代码
1，jsp内容
Html代码
<!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>
<!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
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;
}
$(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
Java代码
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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 回顾 实现异步交互
- XMLHttpRequest 对象实现异步交互
- python调用外部子进程，通过管道实现异步标准输入和输出的交互
- 母板页Master实现ajax的异步交互之美
- Struts2 结合 Ajax 实现异步交互数据
- Struts2+JQuery+JSON实现异步交互
- Ajax实现异步交互完成注册页面
- Struts2+JQuery+JSON实现异步交互
- Struts2+JQuery+JSON实现异步交互，包括从后台获得单个值、对象、List和Map数据并从前台的表达中获取值
- Struts2+JQuery+JSON实现异步交互
- Ajax中利用jQuery简单实现异步交互
- c#服务器， 和Unity端 C#实现异步交互
- js实现异步交互步骤
- Struts2+jQuery+JSON实现异步交互
- ASP.NET2.0中用ICallbackEventHandler实现客户端与服务器端异步交互
- ajax实现异步交互
- 【Python之旅】第六篇（五）：生产者消费者模型实现多线程异步交互
- 生产者消费者模型实现多线程异步交互
- Struts2+JQuery+JSON实现异步交互
- Struts2+jQuery+JSON实现异步交互