学习JQuery插件zTree树结构

来源：互联网发布：鹏信珠宝软件编辑：程序博客网时间：2024/05/29 11:23

1.新建HTML文件，导入三个文件

2.在html元素中选择一个树的容器

树的容器必须具备：class="tree"

3.在js中调用生成tree的方法zTree

$.fn.zTree = function(zTreeSetting, zTreeNodes) {},该函数是在JQuery对象的原型上加的函数。

解析以上两个参数zTreeSetting, zTreeNodes，

zTree的方法的两个参数

setting:

* 是控制整个树的属性

* setting是一个json格式的对象

* setting中的key值参照api中的setting详解的key值

* treeNodeKey规定树的唯一标识名称

* treeNodeParentKey规定父节点的名称

zTreeNodes:

* 对每一个树的节点的描述

* zTreeNodes是一个json格式的对象

* zTreeNodes除了节点的名称和父节点的名称以外，其他的都在zTreeNodes详解中查找

* 比较常用的每一个节点的key值

name 节点的名称

url 节点的超级连接

target 指向要跳转的位置，在frameset中使用

icon 为节点图标的路径

附上测试源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE> ZTREE DEMO </TITLE>

<style>

body {

background-color: white;

margin:0; padding:0;

text-align: center;

}

div, p, table, th, td {

list-style:none;

margin:0; padding:0;

color:#333; font-size:12px;

font-family:dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;

}

</style>

<!--

var zTree;

var demoIframe;

var setting = {

isSimpleData: true,

treeNodeKey: "id",

treeNodeParentKey: "pid",

showLine: true,

root:{

isRoot:true,

nodes:[]

}

};

zNodes =[

{"id":0,"pid":-1,"name":"亚洲"},

{"id":1,"pid":0,"name":"中国"},

{"id":10,"pid":1,"name":"北京","icon":"user.gif"},

{"id":11,"pid":1,"name":"上海","icon":"user.gif"},

{"id":12,"pid":1,"name":"天津","icon":"user.gif"},

{"id":13,"pid":1,"name":"重庆","icon":"user.gif"},

{"id":2,"pid":0,"name":"日本"},

{"id":20,"pid":2,"name":"东京"},

{"id":3,"pid":0,"name":"韩国"},

{"id":30,"pid":3,"name":"首尔"},

];

$(document).ready(function(){

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

});

function loadReady() {

var h = demoIframe.contents().find("body").height();

if (h < 600) h = 600;

demoIframe.height(h);

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<TR>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

0 0