zTree开发使用说明

来源：互联网发布：置乱算法 arnold 编辑：程序博客网时间：2024/06/05 09:06

使用条件:

使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件

zTree核心js文件:jquery.ztree-2.6.js

zTree样式文件:

因为zTree是基于jquery，所以还需要对应的jQuery库文件

将这些文件引入使用页面:

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

<scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>

简单使用:

用户需要在页面上新建一个tree对象，需要使用

var zTree = $("#tree").zTree(setting, zTreeNodes);

$("#tree")是获取页面上一个id为tree的<ul>元素

zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree的参数配置数据,json数据格式

另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。

zTree 的数据参数,json数据格式

而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。

完整代码为：

<html>

<head>

<title>这里是测试页面</title>

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

<scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>

<scripttype="text/javascript">

var setting = {

showLine: false, //是否显示线，true为显示，false为不显示

checkable: true,//是否有可选框，true为可选，false为不可选

showIcon : false//是否有图标，true为有，false为没有，默认为true

};

//新建数据对象，json数据格式

var zTreeNodes1 = [

{ name:"手机", open:false, checked:true,

nodes: [

{ name:"诺基亚", isParent:true},

{ name:"三星"},

{ name:"索爱"},

{ name:"多普达"}

]},

{ name:"电脑", open:true, checked:true,

nodes: [

{ name:"硬件", checked:true},

{ name:"整机", isParent:true, checked:true},

{ name:"网络", checked:true}

]},

{ name:"家电", open:false,

nodes: [

{ name:"电视", checked:true},

{ name:"冰箱"},

{ name:"空调", isParent:true}

]}

];

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

var zTree = $("#tree").zTree(setting, zTreeNodes1);

</script>

</html>

运行结果便如:

Setting对象常用属性说明:

var setting = {

isSimpleData :true, //是否使用简单的数组结构

treeNodeKey :"id", //使用简单数组结构必须制定的节点自身id

treeNodeParentKey : "pId", //使用简单数组结构必须指定的父节点id

showLine:false, //是否显示线，true为显示，false为不显示

checkable:true, //是否有可选框，true为可选，false为不可选

showIcon :false, //是否有图标，true为有，false为没有，默认为true

callback : {

click: zTreeOnClick //回调函数，需要重写这个回调函数

}

};

如果使用简单数组格式，数据对象的格式便需要如下:

//数据对象，通过pId字段指定上级目录

var zTreeNodes3 = [

{"id":1,"pId":0, "name":"test1"},

{"id":11,"pId":1, "name":"test11"},

{"id":12,"pId":1, "name":"test12"},

{"id":111,"pId":11, "name":"test111"},

{"id":112,"pId":11, "name":"test222"},

{"id":113,"pId":11, "name":"test3"}

];

完整代码如下:

<html>

<head>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

//新建一个配置对象，json数据格式

var setting = {

isSimpleData :true, //是否使用简单的数组结构

treeNodeKey :"id", //使用简单数组结构必须制定的节点自身id

treeNodeParentKey :"pId", //使用简单数组结构必须指定的父节点id

showLine:false, //是否显示线，true为显示，false为不显示

checkable:true, //是否有可选框，true为可选，false为不可选

showIcon :false, //是否有图标，true为有，false为没有，默认为true

callback : {

click: zTreeOnClick //回调函数，协议重写这个回调函数

}

};

//回调函数：zTreeOnClick，当用户点击树形结构的节点时触发

function zTreeOnClick(event, treeId, treeNode) {

//treeNode为用户点击的节点

alert(treeNode.tId +", " + treeNode.name);

}

//数据对象2，简易数据结构

var zTreeNodes2 = [

{"id":1,"pId":0, "name":"test1","open":true},

{"id":11,"pId":1, "name":"test11","open":true},

{"id":12,"pId":1, "name":"test12"},

{"id":111,"pId":11, "name":"test111"},

{"id":112,"pId":11, "name":"test222"},

{"id":113,"pId":11, "name":"test3"}

];

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

var zTree = $("#tree").zTree(setting, zTreeNodes2);

</script>

</html>

运行效果便如:

而因为重写了zTreeOnClick回调函数，所以点击节点的时候，会触发回调函数

数据对象属性介绍

checked:当 setting.checkable = true时有效，设定节点的 CheckBox 是否被勾选,默认是 false

Click:设定节点在鼠标点击后做的事情，相当于 onclick="...."的内容，可用于一些简单操作，如果过于复杂的，建议通过 click事件进行控制处理

Icon:设定节点的自定义图标，以替换 css样式中配置的普通图标。（设定时请注意指定图标的相对路径是否正确）

Name:节点显示的名称。

Open:设置父节点初始化展开状态。

对于不需要异步获取子节点信息的父节点有效。

Target:对于存在url属性的节点，设置点击后跳转的目标，同超链接的 target 属性（"_blank", "_self"等）

Url:指定节点被点击后的跳转页面 URL地址

常用方法介绍：

其中zTree是加载树形结构之后返回的对象

function ceshi(){

//重新加载树形结构，可以指定另外的setting对象和另外的

数据对象，进行重新加载

var zTree = $("#tree").zTree(setting2, zTreeNodes3);

//获取勾选状态改变的节点集合

var nodes = zTree.getChangeCheckedNodes();

//获取被选中的节点集合

var nodes = zTree.getCheckedNodes();

//获取id为111的节点，这里是精确获取

var node = zTree.getNodeByParam("id",111);

//获取name中包含"abc"的节点，模糊查询，

var nodes = zTree.getNodesByParamFuzzy("name","abc", node);

//添加新的节点,添加新的数据对象到指定的父节点下，其中parentNode为欲添加的父节点，如果要在根节点目录下添加，则指定parentNode为null

zTree.addNodes(parentNode,newNodes);

//获取被选中的节点

var selectedNode = zTree.getSelectedNode();

}

通过ajax异步获取数据

<html>

<head>

<basehref="<%=basePath%>">

<title>这是测试树形结构</title>

<metahttp-equiv="pragma"content="no-cache">

<metahttp-equiv="cache-control"content="no-cache">

<metahttp-equiv="expires"content="0">

<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">

<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>

var zTree1;

var setting = {

checkable:true,

async:true,//允许异步获取数据

asyncUrl:"", //获取节点数据的URL地址

asyncParam: ["name","id"], //获取节点数据时，必须的数据名称，例如：id、name

asyncParamOther: [] //其它参数 ( key, value键值对格式)

};

//初始化时的数据对象

var zNodes =[

{"name":"google","url":"http://g.cn","target":"_blank","click":"alert('myname')"},

{"name":"baidu","url":"http://baidu.com","target":"_blank"},

{"name":"sina","url":"http://www.sina.com.cn","target":"_blank"}

];

//该方法用于预处理异步获取的数据，其中的childNodes便是异步获取的数据对象

function dataFilter(treeId, parentNode, childNodes) {

//将初始化时的数据对象赋予一个变量

var nodes = zNodes;

if (childNodes) {

for(var i =0; i<childNodes.length; i++) {

//将新获取的数据对象一个个的加入nodes中

nodes.push(childNodes[i]);

}

//返回数据对象

return nodes;

}

function refreshTree(asyncUrl) {

//设置异步获取数据的地址，还可以是setting.asyncUrl = "data/note.txt"等，不止限于服务器获取

setting.asyncUrl ="testAction_huoqu.action";

//设定异步获取数据后使用dataFilter方法进行数据处理

setting.asyncDataFilter = dataFilter;

//重新加载，这里不需要再指定数据对象

zTree1 = $("#treeDemo").zTree(setting);

}

</script>

</head>

<body>

</body>

<scripttype="text/javascript">

zTree1 = $("#treeDemo").zTree(setting, zNodes);

</script>

</html>

服务器端代码：

Struts2代码

public String huoqu(){

JSONArray jsonArray =new JSONArray();

JSONObject one =new JSONObject();

one.put("name","魔兽世界");

one.put("url","www.wow.com");

one.put("target","_blank");

JSONObject two =new JSONObject();

two.put("name","剑侠情缘");

two.put("url","www.jianxia.com");

two.put("target","_blank");

JSONObject three =new JSONObject();

three.put("name","传奇");

three.put("url","www.mir2.com");

three.put("target","_blank");

jsonArray.add(one);

jsonArray.add(two);

jsonArray.add(three);

HttpServletResponse response = ServletActionContext.getResponse();

//返回页面的信息为utf-8编码，不加这个提示信息就会变成乱码

response.setCharacterEncoding("utf-8");

//返回页面的信息为html/text格式，不加这个返回页面的信息就会是整个页面

response.setContentType("html/text");

//将信息通过ajax返回

PrintWriter out =null;

try {

out = response.getWriter();

out.print(jsonArray.toString());

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return"testZTreePage";

}

详情请查看api

原文地址：http://blog.csdn.net/edit_show/article/details/8556991

阅读全文

0 0