学习JQuery插件zTree树结构

最新推荐文章于 2019-10-09 19:33:28 发布

其实是这样的__

最新推荐文章于 2019-10-09 19:33:28 发布

阅读量1.1k

点赞数

分类专栏：前端技术文章标签： js ztree

前端技术专栏收录该内容

7 篇文章

订阅专栏

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

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

<script type="text/javascript" src="jquery-ztree-2.5.js"></script>

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

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

<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>

树的容器必须具备：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>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

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

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

<script type="text/javascript" src="jquery-ztree-2.5.js"></script>

<SCRIPT LANGUAGE="JavaScript">

<!--

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>

<TABLE border=0 height=600px align=left>

<TR>

<TD width=230px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">

<ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

学习JQuery插件zTree树结构(一)

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。