zTree简单使用方法

最新推荐文章于 2022-05-12 11:42:40 发布

qq_41369312

最新推荐文章于 2022-05-12 11:42:40 发布

阅读量4.4k

点赞数

分类专栏： zTree的初次使用

zTree的初次使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.首先在页面上的标签<ul/>中：

二.定义ztree的配置参数setting：

var setting = {
data: {
simpleData: {
enable:true
}
},
async: {
enable: true,
url:"${unionproUser}myTeam/queryChilds.shtml",
autoParam:["id=userId"],
type:"post",
dataType: 'json',
dataFilter: filter
},
view: {
dblClickExpand: false,
showLine: true, //是否显示节点间的连线
selectedMulti: false,
expandSpeed: "fast"
}
};

function filter(treeId, parentNode, childNodes) {
return childNodes;
}

分析：

1.首先是data。在setting的data的simpleData中配置enable为true，则表示使用简单数据模式。不配置或者配置为false，则为标准数据模式。这里我使用的是简单数据模式。

2.然后是async。它表示异步请求，当我点击树的加号按钮时会触发。

(1)enable：设置zTree是否开启异步加载模式，默认值为false。如果设置为true，请务必设置setting.async内的其他参数。如果需要根节点也异步加载，初始化时treeNodes参数设置为null即可。如果不需要，则在zNodes中设置数据（因为我使用的是简单数据模式，所以我在zNodes中设置了(id,pId,name,isParent:true 如果不设置isParent:true，则树没有加号，我也不知道为什么）

(2)url：就是你要请求的地址

(3)autoParam:异步加载时需要自动提交父节点属性的参数，默认值为[]。

将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"]

也可以设置提交时的参数名称，例如 server 只接受 userId: ["id=userId"] //这个userId是在后台用到的，也就是request.getparameter("userId"); 而id则表示zNodes参数中的id

(4) dataFilter：用于的Ajax返回的数据进行预处理的函数。当Ajax执行后触发function filter（）事件，childNodes即为后端穿过来的name属性，这个name是在zNodes中显示数据用的

三.获取zTree所要绑定的数据。

我的代码如下：（上面的赋值方式是因为用了bettl模板，在前端将后端的数据显示）

var zNodes =[
@ if(!isEmpty(datas!)){
{id:"${datas.id!}", pId:"${datas.recUserId!}", name:"${datas.accountNum!}　　　　　　${datas.name!}　　　　　　0.00　　　　　　0.00　　　　　　　　0.00",isParent:true},
@ }
];

分析：

zTree在使用JSON数据时，由两种数据格式供我们使用，分别是标准数据模式和简单数据模式

标准的数据模式为：

var nodes = {name:"第一层级",children:[{name:"第二层级",id:2,childred:[{}]}],id:1}

标准的数据模式的数据是一个JSON对象，立面的name会用作显示节点的名称，children会用作第一个阶段的子节点，children里面是一个个的对象，这些对象也是第一层级的格式，层层嵌套最终形成一个数据集合用作加载tree。name和children是必须的属性，其他的属性根据我们的实际需求具体添加。

简单数据模式：

var nodes = [{name:"第一层级",id:0,pId:null},{name:"第二层级",id:1,pId:0},{name:"第一层级",id:2,pId:0}]

　　简单数据模式的数据是一个数组对象，数组中的每一个对象都必须包括name,id,pid，name用作显示当前的节点名称,id表示当前的节点的唯一标识可用来做关联父级节点的桥梁，pid也是用来做父子节点的桥梁的，在默认情况下如果pid为null则当前的这个对象表示是tree的顶层节点。其他的属性根据我们的实际需求可以自行添加。

四。初始化tree生成树。

我的代码如下：

$(document).ready(function(){
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);

});

分析：

当页面加载完成时自动加载此函数，初始化setting和zNodes

以上就是全部内容，如果想详细了解zTree，可以去看官方文档：http://www.treejs.cn/v3/api.php