ZTree的使用

来源：互联网发布：win7开机windows后黑屏编辑：程序博客网时间：2024/05/01 00:26

http://code.google.com/p/jquerytree/downloads/list 下载地址

方法一：

1.jquery-1.7.2.min.js ，jquery.ztree-2.6.js ，jquery.ztree-2.6.min.js ，zTreeIcons.css ，zTreeStyle.css 和放图片的img包和这些文件放在同一目录下

2.引用包

3.设置ZTree的样式可以参照api

var setting = {

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

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

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

};

4.要显示的数据Json格式

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

var zTreeNodes1 = [

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

nodes: [

{ name:"诺基亚"},

{ 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:"电视"},

{ name:"冰箱"},

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

]}

];

也可以，从后端传过来

5.用来加载ztree的空间

<body>

<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>//class="tree"必须有的因为样式是以.tree设置的

</body

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

</script>

方法二：

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

window.location.href="new.jsp";

}

var zTree;

var treeNodes;

$(function(){

$.ajax({

async : false,

cache:false,

type: 'POST',

dataType : "json",

url: "/ZTreeTest/ZTreeTestTest",//请求的action路径

error: function () {//请求失败处理函数

alert('请求失败');

success:function(data){ //请求成功后处理函数。

alert(data);

treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes

}

});

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

});

jsp页面：

<body>

<div>

</div>

</form>

</body>

java代码：

需要的jar包：commons-beanutils.jar，commons-collections-3.2.1.jar，commons-lang-2.4.jar，commons-logging-1.1.1.jar，ezmorph-1.0.6.jar，json-lib-2.4-jdk15.jar

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";

String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";

String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";

String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";

String s5 = "{id:5, pId:4, name:\"test5\" , open:true}";

String s6 = "{id:6, pId:4, name:\"test6\" , open:true}";

List<String> lstTree = new ArrayList<String>();

lstTree.add(s1);

lstTree.add(s2);

lstTree.add(s3);

lstTree.add(s4);

lstTree.add(s5);

lstTree.add(s6);

System.out.print("JsonNumber:" JSONArray.fromObject(lstTree).toString());

//利用Json插件将Array转换成Json格式

response.getWriter().print(JSONArray.fromObject(lstTree).toString());

}

数据对象属性介绍

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>

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

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>

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

}

获取 zTree 当前被选中的节点数据 JSON 对象。

var selectedNode = zTreeObj.getSelectedNode();

var selectedNode = zTreeObj.getSelectedNode();

阅读全文

0 0