JQUERY树型插件ZTREE小例子

最新推荐文章于 2025-08-29 18:30:08 发布

穿林度水

最新推荐文章于 2025-08-29 18:30:08 发布

阅读量631

点赞数

一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。

1、新建了一个HTML在<head>标签内导入需要的JS和CSS文件。

[html] view plain copy

<script language="javascript" type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>
<link type="text/css" rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
<script language="javascript" type="text/javascript" src="js/jquery.ztree.excheck-3.0.js"></script>

我这里使用的是jquery1.6.4，jquery的开发包这是必须的，然后导入ztree.core核心包，这里使用的是ztree-3.0还是beta版本的。呵呵，ztree.excheck-3.0这是升级树控件，比如加上checkbox这些。

2、<script>部分就直接贴代码了

[html] view plain copy

<script type="text/javascript" language="javascript">
/**ztree的参数配置，setting主要是设置一些tree的属性，是本地数据源，还是远程，动画效果，是否含有复选框等等**/
var setting = {
check: { /**复选框**/
enable: false,
chkboxType: {"Y":"", "N":""}
},
view: {
//dblClickExpand: false,
expandSpeed: 300 //设置树展开的动画速度，IE6下面没效果，
},
data: {
simpleData: { //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的
enable: true,
idKey: "id", //id和pid，这里不用多说了吧，树的目录级别
pIdKey: "pId",
rootPId: 0 //根节点
}
},
callback: { /**回调函数的设置，随便写了两个**/
beforeClick: beforeClick,
onCheck: onCheck
}
};
function beforeClick(treeId, treeNode) {
alert("beforeClick");
}
function onCheck(e, treeId, treeNode) {
alert("onCheck");
}
var citynodes = [ /**自定义的数据源，ztree支持json,数组，xml等格式的**/
{id:0, pId:-1, name:"中国"},
{id:1, pId:0, name:"北京"},
{id:2, pId:0, name:"天津"},
{id:3, pId:0, name:"上海"},
{id:6, pId:0, name:"重庆"},
{id:4, pId:0, name:"河北省", open:false, nocheck:true},
{id:41, pId:4, name:"石家庄"},
{id:42, pId:4, name:"保定"},
{id:43, pId:4, name:"邯郸"},
{id:44, pId:4, name:"承德"},
{id:5, pId:0, name:"广东省", open:false, nocheck:true},
{id:51, pId:5, name:"广州"},
{id:52, pId:5, name:"深圳"},
{id:53, pId:5, name:"东莞"},
{id:54, pId:5, name:"佛山"},
{id:6, pId:0, name:"福建省", open:false, nocheck:true},
{id:61, pId:6, name:"福州"},
{id:62, pId:6, name:"厦门"},
{id:63, pId:6, name:"泉州"},
{id:64, pId:6, name:"三明"},
{id:7, pId:0, name:"四川省", open:true, nocheck:true},
{id:71, pId:7, name:"成都"},
{id:72, pId:7, name:"绵阳"},
{id:73, pId:7, name:"自贡"},
{id:711, pId:71, name:"金牛区"},
{id:712, pId:71, name:"锦江区"},
{id:7111, pId:711, name:"九里堤"},
{id:7112, pId:711, name:"火车北站"}
];
$(document).ready(function(){//初始化ztree对象
var zTreeDemo = $.fn.zTree.init($("#cityTree"),setting, citynodes);
});
</script>

3、body部分，就一个

[html] view plain copy

<ul id="cityTree" class="ztree"></ul>

4、当异步获取数据库的数据时，我们需要修改setting设置，也是返回的数组形式的数据：

[javascript] view plain copy

var setting = {
async: {
enable: true,
type:'post',
url:"treedata.jsp"
///dataFilter: filter
},
data: {
simpleData: { //简单的数据源，一般开发中都是从数据库里读取，API有介绍，这里只是本地的
enable: true,
idKey: "id", //id和pid，这里不用多说了吧，树的目录级别
pIdKey: "pId",
rootPId: 0 //根节点
}
},
callback: {
onAsyncSuccess: zTreeOnAsyncSuccess /**回调函数的设置，异步提交成功的回调函数**/
}
};
$(document).ready(function(){//初始化ztree对象
$.fn.zTree.init($("#cityTree"), setting);
});

小结：以上是个很简单的ztree的应用小例子，数据源是本地的，一些复杂的应用还是在这基础上拓展的，API是很好的学习资料，可以多查查。

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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