ztreeDemo.jsp
<%@ include file="header.jsp"%>
<!doctypehtml> <htmllang="zn"> <head> <basehref="<%=basePath%>">
<title>zTreeDemo</title>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="This is my page">
<!-- 此处用于css --> <linkrel="stylesheet"href="<%=basePath%>/resources/zTree_v3/css/demo.css"type="text/css"> <linkhref="<%=basePath%>/resources/zTree_v3/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"type="text/css"/> <!-- 自定义 --> <linkhref="<%=basePath%>/resources/common/css/ztreeDemo.css"rel="stylesheet"type="text/css"/> <linkrel="stylesheet"type="text/css"/>
<!-- 此处用户js --> <scripttype="text/javascript"src="<%=basePath%>/resources/zTree_v3/js/jquery-1.4.4.min.js"></script> <scripttype="text/javascript"src="<%=basePath%>/resources/zTree_v3/js/jquery.ztree.all-3.5.min.js"></script> <!-- 自定义 --> <scripttype="text/javascript"src="<%=basePath%>/resources/common/js/ztreeDemo.js"></script> <scripttype="text/javascript">
</script> </head>
<body> <div> <ulid="tree"class="ztree"style="height:500px; width:240px; overflow:auto;">dd</ul> </div> </body> </html>
|
ztreeDemo.js
var setting = { data: { //data simpleData: { enable:true, idKey: "id", pIdKey: "pId", rootPId: null } }, //data // /* async: { enable: true, url:"treeAction.do", autoParam:["id","name"], //contentType: "application/json", //otherParam:{"pId":"dd"}, // dataType: "text",//默认text // type:"get",//默认post dataFilter: filter //异步返回后经过Filter }, // */ ///* view: { dblClickExpand: true, expandSpeed: "fast", showLine: true, //showIcon: false, selectedMulti: false, fontCss : setFontCss }, //*/ callback:{ onRightClick: zTreeOnRightClick, onClick: zTreeOnClick, beforeAsync: zTreeBeforeAsync, // 异步加载事件之前得到相应信息 onAsyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun onAsyncError: zTreeOnAsyncError, //加载错误的fun beforeClick:beforeClick //捕获单击节点之前的事件回调函数 } };
//设置Json指定节点的字体颜色 function setFontCss(treeId, treeNode) { //if(treeNode.id == '2'){ if(treeNode.name =='test3'){ return treeNode.level == 0 ? {'font-weight':'bold' } : {}; }else{ return treeNode.level == 0 ? {color:"red"} : {}; } };
//异步返回后经过Filter function filter(treeId, parentNode, childNodes) { if (!childNodes)return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace('',''); } return childNodes; };
//鼠标右击事件 function zTreeOnRightClick(event, treeId, treeNode) { // alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot"); alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot"); };
//点击事件 function zTreeOnClick(event, treeId, treeNode) { // alert(treeNode.id + ", " + treeNode.name); };
//异步加载事件之前得到相应信息 function zTreeBeforeAsync(event, treeId, treeNode){ // alert("异步加载之前!"); };
//异步加载成功的fun function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ //alert(treeNode.pId); };
//加载错误的fun function zTreeOnAsyncError(event, treeId, treeNode){ alert("异步加载失败!"); };
//捕获单击节点之前的事件回调函数 function beforeClick(treeId,treeNode){ /* if(!treeNode.isParent){ alert("请选择父节点"); return false; }else{ return true; } **/ };
// 数据内容 /* var zTreeNodes = []; var zTreeNodes = [ {"id":1, "pId":0, "name":"test1dddd", open:true, iconOpen:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_open.png", iconClose:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_close.png"}, {"id":11, "pId":1, "name":"test11"}, {"id":12, "pId":1, "name":"test12", icon:"./resources/zTree_v3/css/zTreeStyle/img/diy/4.png"}, {"id":111, "pId":11, "name":"test111", "font":{color:"blue"} },
{"id":2, "pId":0, "name":"test2", open: true, iconOpen:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_open.png", iconClose:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_close.png"}, {"id":21, "pId":2, "name":"test21", icon:"./resources/zTree_v3/css/zTreeStyle/img/diy/9.png"}, {"id":22, "pId":2, "name":"test22", icon:"./resources/zTree_v3/css/zTreeStyle/img/diy/5.png"},
{"id":3, "pId":0, "name":"test3", isParent:true, iconOpen:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_open.png", iconClose:"./resources/zTree_v3/css/zTreeStyle/img/diy/1_close.png"},
{"id":4, "pId":0, "name":"test4", isParent:true}, ];
var zTreeNodes = [ {"checked":"","chkDisabled":"","id":1,"name":"test1","open":"true","pid":0,"value":"值value1"}, {"checked":"true","chkDisabled":"true","id":11,"name":"test11","open":"true","pid":1,"value":"值value11"},
{"checked":"","chkDisabled":"","id":2,"name":"test2","open":"true","pid":0,"value":"值value2"}, {"checked":"","chkDisabled":"","id":22,"name":"test22","open":"true","pid":2,"value":"值value22"},
{"checked":"","chkDisabled":"","id":3,"name":"test3","open":"true","pid":0,"value":"值value3"} ];
*/
var zTreeNodes = [ {"checked":"","chkDisabled":"","id":1,"name":"test1","open":"false","pId":0,"value":"值value1", isParent:true},
{"checked":"","chkDisabled":"","id":2,"name":"test2","open":"false","pId":0,"value":"值value2", isParent:true},
{"checked":"","chkDisabled":"","id":3,"name":"test3","open":"false","pId":0,"value":"值value3", isParent:true},
{"checked":"","chkDisabled":"","id":4,"name":"test4","open":"false","pId":0,"value":"值value4", isParent:true},
{"checked":"","chkDisabled":"","id":5,"name":"test5","open":"false","pId":0,"value":"值value5", isParent:true} ];
$(document).ready(function() { var zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes); });
|
TreeAction.do(serverlet)
package com.wsy.action;
import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List;
import javax.servlet.ServletException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class TreeAction extends BaseEntityAciton { @Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id = request.getParameter("id"); String pId = request.getParameter("pId"); String name = request.getParameter("name");
// System.out.println(id +"\t"+pId+"\t"+name);
// response.setContentType("text/html; charset=UTF-8"); // 这里返回类型也可以用application/json response.setContentType("application/json; charset=UTF-8"); PrintWriter out = response.getWriter(); if (id.equals("1")) { out.write(this.getData()); }else{ System.out.println("No data..."); } out.flush(); out.close(); }
private String getData() { Tree tree1 = new Tree(); tree1.setId(1); tree1.setpId(0); tree1.setName("test1"); tree1.setValue("值value1"); tree1.setOpen("false");
Tree tree2 = new Tree(); tree2.setId(2); tree2.setpId(0); tree2.setName("test2"); tree2.setValue("值value2"); tree2.setOpen("true");
Tree tree3 = new Tree(); tree3.setId(3); tree3.setpId(0); tree3.setName("test3"); tree3.setValue("值value3"); tree3.setOpen("true");
Tree tree11 = new Tree(); tree11.setId(11); tree11.setpId(1); tree11.setName("test11"); tree11.setValue("值value11"); tree11.setOpen("true"); tree11.setChecked("true"); tree11.setChkDisabled("true");
Tree tree22 = new Tree(); tree22.setId(22); tree22.setpId(2); tree22.setName("test22"); tree22.setValue("值value22"); tree22.setOpen("true");
List<Tree> treeList = new ArrayList<Tree>(); treeList.add(tree1); treeList.add(tree2); treeList.add(tree3); treeList.add(tree11); treeList.add(tree22);
JSONArray datas = JSONArray.fromObject(treeList); // 这是样例报文datas=[{"checked":"","chkDisabled":"","id":1,"name":"test1","open":"true","pId":0,"value":"值value1"},{"checked":"","chkDisabled":"","id":2,"name":"test2","open":"true","pId":0,"value":"值value2"},{"checked":"","chkDisabled":"","id":3,"name":"test3","open":"true","pId":0,"value":"值value3"},{"checked":"true","chkDisabled":"true","id":11,"name":"test11","open":"true","pId":1,"value":"值value11"},{"checked":"","chkDisabled":"","id":22,"name":"test22","open":"true","pId":2,"value":"值value22"}] // System.out.println("datas=" + datas); return datas.toString(); }
} |