JQUERY树型插件ZTREE小例子

最新推荐文章于 2024-05-15 23:54:08 发布

zyujie

最新推荐文章于 2024-05-15 23:54:08 发布

阅读量3.8w

点赞数 3

本文链接：https://blog.csdn.net/zyujie/article/details/7027663

版权

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

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

<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>部分就直接贴代码了

<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部分，就一个

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

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

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是很好的学习资料，可以多查查。

zyujie

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JQUERY树型插件ZTREE小例子

一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和大家分享分享。1、新建了一个HTML在标签内导入需要的JS和CSS文件。我这里使用的是jquery1.6.4，jquery的开发包这是必须的，然后导入zt
复制链接

扫一扫