zTree简单使用方法

一.首先在页面上的标签<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

zTree简单使用方法相关推荐

JAVA用最简单的方法来构建一个高可用的服务端，提升系统可用性
一.什么是提升系统的高可用性 JAVA服务端,顾名思义就是23体验网为用户提供服务的.停工时间,就是不能向用户提供服务的时间.高可用,就是系统具有高度可用性,尽量减少停工时间.如何用最简单的方法来搭建 ...
【CI3.1】CI框架简单使用方法
CI框架简单使用方法 1.回忆MVC1.1.M:模型,提供数据,保存数据1.2.V:视图,只负责显示,表单form1.3.C:控制器,协调模型和视图1.4.action:动作,是控制器中的方法,用于被 ...
smarty mysql demo_PHP Smarty模版简单使用方法
本文实例讲述了PHP Smarty模版简单使用方法.分享给大家供大家参考,具体如下: Index.php: require('../libs/Smarty.class.php'); $smarty = ...
通过身份证号提取性别_身份证号提取生日、年龄、性别、籍贯，最简单的方法！...
上一期,Amy跟大家分享了如何从身份证号中提取出生日期.今天我们继续来讲如何提取年龄.性别.籍贯. 身份证号提取年龄 ✦思路:在E2单元格输入公式"=DATEDIF(D2,TODAY(),& ...
创建三维建筑可视化和虚拟现实的最快和最简单的方法
创建三维建筑可视化和虚拟现实的最快和最简单的方法时长3小时12分 1280X720 Mkv 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕大小解压后:2.86G 共28小节课程标题 ...
scala akka_如何对Scala和Akka HTTP应用程序进行Docker化-简单的方法
scala akka by Miguel Lopez 由Miguel Lopez 如何对Scala和Akka HTTP应用程序进行Docker化-简单的方法 (How to Dockerise a S ...
上如何刻字_如何用简单的方法在零件表面刻字：这里就有你想要的答案
上一篇文章我们用solidworks软件的焊件模块来绘制了一个最简单的机架.此过程中用到了焊件的以下功能:结构构件.角撑板.只要以后画机架肯定要用到结构构件的,大家应该注意学习好这个最常用的功能,在这 ...
不用恐惧AI的高速发展，论击败阿法狗（零）最简单的方法
作者:刘锋计算机博士,互联网进化论作者 10月19日凌晨,在国际学术期刊<自然>(Nature)上发表的一篇研究论文中,谷歌下属公司Deepmind报告新版程序AlphaGo Zero: ...
PHP5.2.3+apache2.2.4的最简单安装方法
最近为了安装PHP+apache这个PHP开发环境,到处查找资料,网上众说纷纭,我试了好多版本都没有成功,原因是网上说的都是过时的版本的配置方法(如PHP4+apache2.0),随着PHP和apac ...

zTree简单使用方法

zTree简单使用方法相关推荐

最新文章

热门文章