ztree多树实现异步交互
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>
<!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="保存目录关系" οnclick="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;
- }
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
