jquery.ztree.all-3.5.min.js

最新推荐文章于 2020-04-28 20:16:25 发布

肖肖肖丽珠

最新推荐文章于 2020-04-28 20:16:25 发布

阅读量6.4k

点赞数

分类专栏：插件

本文链接：https://blog.csdn.net/qq_33769914/article/details/79554639

版权

插件专栏收录该内容

42 篇文章 1 订阅

订阅专栏

http://www.ztree.me/v3/main.php 这个是ztree的官网，里面有很多实用的小例子，参考这些例子来学习，能少走不少弯路（下载的ztree里也有demo可以参考，一样的东西）。

1. jsp方面

页面导入js，css如下：

设置setting属性和节点数组

调用方法生成树

body里有个id为ztree的元素

</div>

下面写一个含有ajax的例子

var $bookCatalogTreeList = $("#bookCatalogTreeList");
var setting = {
data: {
simpleData: {
enable: true, //如果这个设置了true下面的三个是必填的。
idKey: "gid", //主键
pIdKey: "parentId", //父亲对象的id.如果他们这个值相同那么他们是同一个父亲的子集。可以根据这个pIdKey找到对对应的idKey、就是他的父亲
rootPId: "null"
}
},
callback: {
onClick: zTreeOnClick 点击树节点所触发的事件zTreeOnClick是个函数
}

};

下面读数据

$.ajax({

url: "com.cloud.resource.service.impl.ResourceRs.findCatalogByBookId(bookId)",
data: {
bookId: bookGid
},
success: function(resdata, textStatus, jqXHRult){
if(resdata != null){
treeObj = $.fn.zTree.init($bookCatalogTreeList, setting, resdata);
}
}

});

获取当前被选中的节点数据集合。。可以把你点击选中的那个内容显示出来

var nodes = treeObj.getSelectedNodes();

if(nodes.length > 0){
var nodeGid = nodes[0].gid;

var nodeName = nodes[0].name;

$("#catalogGid").val(nodeGid);

$("#catalogName").val(nodeName);

}

碰到的问题。如果数据里面要显示的不是name的值，而是其他参数名怎么办呢？

var setting = {
data: {
simpleData: {
enable: true,
idKey: "GID",
pIdKey: "PARENTGID",
rootPId: "null"
},
key : {
name : "NAME", 加上这个就可以啦，代表显示的名字是NAME这个参数
},
},
callback: {
onClick: zTreeOnClick
},
view : {
showIcon: false
}

};

点击某个子节点获取他的父节点。

callback: {onClick: zTreeOnClick 点击树节点所触发的事件zTreeOnClick是个函数}

在这个点击事件里面获取

function zTreeOnClick(){

var nodes = treeObj.getSelectedNodes();
if (nodes[0].isParent==true){//点的这个是父级。
return;
}
else{
if(nodes.length > 0){

var gid = nodes[0].GID;

var parentItem=nodes[0].getParentNode(); //父节点

var orgParentName=parentItem.NAME; //父节点的名字

}

点击节点前的符号也能触发点击这个树的事件

因为我是通过ajax添加的树，所以要用live来绑定。

$("#bookCatalogTreeList .switch.button").die().live("click",function(){
$(this).siblings("a").trigger("click"); // 页面已经写了function zTreeOnClick()这个点击树节点的函数了，所以这里就直接触发，但是不知道是哪个a标签，所以不能zTreeOnClick()
});