Ztree 3.5 实践笔记

来源：互联网发布：软件质量分析师编辑：程序博客网时间：2024/04/30 07:20

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">

<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"/>

<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)returnnull;

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();

}

0 0