ztree树的使用记录

合集下载

实验经济学：实验操作平台Ztree使用介绍

i1 y gi a g j ，而该轮中群体的总收益为 i1 ny g j na g j 。其中系数
j 1 i 1 j 1 j 1
n
n
n
n
a 被定义为MPCR（Marginal Per Capita Return）即边际个体回报，这里设定 0 a 1 na ，
2.Ztree的运行原理
3.Ztree的基本功能
Ztree最大的功能是给我们提供了一个平台，设计实验比较容易上手，不需要我们很强的编程基础 Ztree是一个免费的开放式平台，全球使用Ztree的人员每日剧增，其功能也在不断发展和完善 Ztree具有非常好的数据存储功能，即使在Zleaf终端甚至Ztree主机崩溃时只要运用方法得当相关的实验数据仍然得到保存或转移。 Ztree只要事先的程序编写没有问题，在实际的运行过程中极少发生错误 Ztree会自动实现一些重要数据变量比如profit的运算
指南手册，包含了Ztree所有功能的介绍
2.Ztree Reference Manual (ztree21ref.pdf)
菜单手册，包含了如何获得Ztree正版软件？
1. 从上述官网下载一份合同即 license contract. 2. 打印两份合同并填写相关材料（含自己所在的研究机构，个人信息以及邮件地址等）和签名 3. 邮寄填写后的合同至如下地址 Sally Gschwend, Institute for Empirical Research in Economics, University of Zurich, Bluemlisalpstrasse 10, CH-8006 Zurich.
用Ztree进行实验设计比较容易上手

vue ztree用法

ZTree 是一个非常流行的基于 jQuery 的树插件，用于生成树形结构的视图。

Vue ZTree 是在 Vue 中使用的 ZTree 的封装版本。

由于 ZTree 本身是基于 jQuery 的，而 Vue 是一个现代的前端框架，直接在 Vue 中使用 jQuery 插件可能会导致一些问题。

因此，通常需要对 ZTree 进行封装，使其能够在 Vue 的单文件组件中更好地工作。

在 Vue 中使用 ZTree，你通常需要做以下几步：1. 引入 ZTree 相关的 CSS 和 JS 文件。

2. 在 Vue 组件中创建一个 DOM 元素作为 ZTree 的容器。

3. 在 Vue 组件的 `mounted` 钩子函数中初始化 ZTree，并传入相关的配置。

下面是一个简单的 Vue ZTree 使用示例：首先，确保你已经通过 `<script>` 标签或 npm 安装了 ZTree 的 js 和 css 文件。

```html<link rel="stylesheet" href="path/to/css/zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="path/to/js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="path/to/js/jquery.ztree.core.js"></script>```然后，你可以创建一个 Vue 组件：```vue<template><div><div :id="treeId" class="ztree"></div> </div></template><script>export default {data() {return {treeId: 'myTree', // 确保 ID 唯一zTreeObj: null,setting: {// ZTree 的配置对象data: {simpleData: {enable: true, // 开启简单数据模式 },},// 其他配置...},zNodes: [// 节点数据{ id: 1, pId: 0, name: "父节点1 - 展开", open: true },{ id: 11, pId: 1, name: "父节点11 - 折叠" },// 更多节点...],};},methods: {initTree() {// 初始化树结构this.zTreeObj = $.fn.zTree.init($(`#${this.treeId}`), this.setting, this.zNodes); },},mounted() {this.initTree(); // 组件挂载完成后初始化树},};</script><style scoped>/* 你可以在这里添加一些自定义样式 */</style>```在上面的代码中：- `treeId` 是用来标识 DOM 元素的 ID，以便 ZTree 能找到正确的元素来渲染树。

zTree使用说明

ZTree使用说明李守坤使用条件:使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件zTree核心js文件:jquery.ztree-2.6.jszTree样式文件:因为zTree是基于jquery，所以还需要对应的jQuery库文件将这些文件引入使用页面:<link rel="stylesheet"href="css/zTreeStyle.css"type="text/css"><script type="text/javascript"src="js/jquery-1.4.2.js"></script><script type="text/javascript"src="js/jquery.ztree-2.6.js"></script>简单使用:用户需要在页面上新建一个tree对象，需要使用var zTree = $("#tree").zTree(setting, zTreeNodes);$("#tree")是获取页面上一个id为tree的<ul>元素zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据,json数据格式另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。

zTree 的数据参数,json数据格式而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。

zTree应用实例详讲

zTree应⽤实例详讲因为项⽬的需要，要创建⼀棵动态的⽂件树,此树除了实现异步获取⼦节点外，还要实现对树节点的增、删、改、查、移动、重命名、批量删除、批量移动。

每⼀个操作都要和数据库打交道。

任务还是挺重的。

我正在考虑⽤什么树⽐较好，，在⽹上⽐较了⼀番，我最初的感觉是⽤jsTree,因为它确实很强⼤，但是因为api不全，所以放弃使⽤jsTree。

我们项⽬组长说⽤⾃带的TreeView插件，，你妹啊，它每次都要back，让⼈很难受，实现这些功能，⽤它，⼀定会把我整死的。

正当我准备⽤Ztree的时候，我们经理来了，他们，ZTree有问题，，问他有什么问题，他说zTree那个批东西很⿇烦，，你妹啊，，⿇烦确实是个问题，但是怕⿇烦使终会失败！！！所以我确实不要怕⽑线，直接⽤zTree这个⽑线。

⾸先先来介绍⼀下zTree,然后就开始⼀步⼀步实现我所说的功能。

时间有限，所以我决定在项⽬开发的同时把这个东西放上来。

google上是这么说的：zTree 是⼀个依靠 jQuery 实现的多功能 “树”。

优异的性能、灵活的配置、多种功能的组合是 zTree 最⼤优点。

专门适合项⽬开发，尤其是树状菜单、树状数据的Web显⽰、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。

在开源的作⽤下，zTree 越来越完善，⽬前已经拥有了不少粉丝，并且今后还会推出更多的zTree 扩展功能库，让 zTree 更加强⼤。

管他三七⼆⼗⼀，开始⼲吗。

第⼀步：下载Ztree ⽹上⼀⼤堆。

第⼆步：把下载好的东西解压过后，放到你的webApp中。

⼀般放images js css三个⽂件夹就o了。

第三步：建⽴⼀个aspx⽂件.第四步：在⽂件中引⽤如下：不要忘了jquery的引⼊哈。

树结构数据的展示和编辑-zTree树插件的简单使用

树结构数据的展⽰和编辑-zTree树插件的简单使⽤最近在项⽬当中遇到⼀个需求，需要以树结构的⽅式展⽰⼀些数据，并可对每⼀个树节点做内容的编辑以及树节点的添加和删除，刚好听说有zTree这个插件可以实现这样的需求，所以在项⽬的这个需求完成之后，在博客⾥⽤⼀个⼩demo的形式记录⼀下zTree的简单实⽤⽅法。

1、下载zTree插件zTree的官⽹地址是：下载地址是：2、引⼊相应的css和js⽂件　zTreeStyle.cssjquery.min.jsjquery.ztree.core.min.jsjquery.ztree.excheck.min.jsjquery.ztree.exedit.min.js3、不说废话，直接代码，简洁明了<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>zTree的简单实⽤</title><link rel="stylesheet" href="zTreeStyle.css"><script src="jquery.min.js"></script><script src="jquery.ztree.core-3.5.min.js"></script><script src="jquery.ztree.excheck-3.5.min.js"></script><script src="jquery.ztree.exedit-3.5.min.js"></script><style>.ztree li {line-height: 25px;}.ztree li span.button.switch {height: 20px;margin-top: -7px;}.ztree li span.button.ico_open,.ztree li span.button.ico_close {background-image: none; width: 0px;margin-left: -2px;}.ztree li span.button.ico_docu {background-image: none; width: 0px;}.ztree li a {height: 25px;}.ztree li span {font-size: 14px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL"}.ztree li a.curSelectedNode {height: 18px;}.ztree li a.curSelectedNode_Edit{height: 18px;}.ztree li a.curSelectedNode_Edit span {display: inline-block;height: 18px;}.ztree li a.curSelectedNode_Edit input {display: inline-block;height: 18px;font-size: 14px;width: 100%;min-width: 150px;font-family: "PingFang SC", "Hiragino GB", "Microsoft YaHei", "Helvetica Neue", "Helvetica", "ARIAL" .ztree li a.curSelectedNode {max-width: 260px;overflow: hidden;}.ztree li span {max-width: 185px;display: inline-block;overflow: hidden;}.ztree li span input{width: 150px;}.ztree li span.button.add {margin-left: 2px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -278px;background-position-y: -237px;}.ztree li span.button.edit {margin-left: 3px;background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: 2px;background-position-y: 3px;}.ztree li span.button.remove {background-position: -144px 0;vertical-align: top;background-image: url(imgs/jui.png);background-position-x: -138px;background-position-y: -137px;}.ztree li span.button.roots_close, .ztree li span.button.root_close, .ztree li span.button.center_close, .ztree li span.button.bottom_close{background-image: url(imgs/jui.png);background-position-x: -77px;background-position-y: -196px;}.ztree li span.button.roots_open, .ztree li span.button.root_open, .ztree li span.button.center_open, .ztree li span.button.bottom_open{background-image: url(imgs/jui.png);background-position-x: -117px;background-position-y: -196px;}</style></head><body><div><ul id="treeDemo" class="ztree"></ul></div></body><script>//zTree的配置var setting = {view: {addHoverDom: addHoverDom,removeHoverDom: removeHoverDom,selectedMulti: false},edit: {enable: true,editNameSelectAll: true,showRemoveBtn: showRemoveBtn,showRenameBtn: showRenameBtn},data: {simpleData: {enable: true}},callback: {onClick:zTreeOnClick, //点击选中事件 beforeDrag: beforeDrag, // 可设置是否允许拖拽功能beforeEditName: beforeEditName,beforeRemove: beforeRemove,beforeRename: beforeRename,onRemove: onRemove,onRename: onRename}};//zTree初始化加载的节点树var zNodes =[{ id:1, pId:0, name:"⽗节点 1", open:true}, //open属性的值true和false，表⽰是否在初始化加载后展开⼦节点{ id:11, pId:1, name:"⼦节点 1-1"},{ id:12, pId:1, name:"⼦节点 1-2"},{ id:13, pId:1, name:"⼦节点 1-3"},{ id:2, pId:0, name:"⽗节点 2", open:true},{ id:21, pId:2, name:"⼦节点 2-1"},{ id:22, pId:2, name:"⼦节点 2-2"},{ id:23, pId:2, name:"⼦节点 2-3"},{ id:3, pId:0, name:"⽗节点 3", open:false},{ id:31, pId:3, name:"⼦节点 3-1"},{ id:32, pId:3, name:"⼦节点 3-2"},{ id:33, pId:3, name:"⼦节点 3-3"},];var log, className = "dark";function zTreeOnClick(event, treeId, treeNode) {console.log('zTreeOnClick');console.log(treeNode)var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),nodes = treeObj.getCheckedNodes(true),v = "";for (var i = 0; i < nodes.length; i++) {v += nodes[i].name + ",";console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值}}function beforeDrag(treeId, treeNode) { return false; //false=禁⽤拖拽功能， true=开启}function beforeEditName(treeId, treeNode) {console.log('beforeEditName');console.log(treeNode)className = (className === "dark" ? "":"dark");var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);zTree.editName(treeNode);}function beforeRemove(treeId, treeNode) {console.log('beforeRemove');className = (className === "dark" ? "":"dark");var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.selectNode(treeNode);return confirm("确认删除节点 -- " + + " 吗？");}function onRemove(e, treeId, treeNode) { //确定删除节点console.log('onRemove');console.log(treeNode)}function beforeRename(treeId, treeNode, newName, isCancel) {console.log('beforeRename');className = (className === "dark" ? "":"dark");if (newName.length == 0) {setTimeout(function() {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.cancelEditName();alert("节点名称不能为空。

ztree的用法 -回复

ztree的用法-回复ZTree是一款用于展示、浏览和编辑树形数据结构的JavaScript插件。

它提供了丰富的功能和选项，使用户可以轻松地操作和管理树形数据。

本文将详细介绍ZTree的用法，并逐步回答与其相关的问题。

1. ZTree的特点ZTree具有以下几个主要特点：- 快速：ZTree使用了高性能的算法和优化，具有快速响应和渲染速度。

- 灵活：ZTree支持在树形结构上进行多种编辑和操作，如增加、删除、更新和移动节点等。

- 易用：ZTree提供了简洁明了的API接口，方便用户对树形结构进行定制和扩展。

- 轻量级：ZTree采用纯JavaScript编写，文件体积小，加载速度快。

2. ZTree的安装和引用要使用ZTree，我们首先需要引入ZTree的相关文件。

可以通过以下几种方式引用：- 下载：从ZTree的官方网站（- CDN引用：通过使用CDN（内容分发网络）引用ZTree文件。

在HTML 文件中添加以下代码：<script src="<link rel="stylesheet" href="其中，`jquery.ztree.all.min.js`是ZTree的核心JS文件，`zTreeStyle.css`是ZTree的样式文件。

3. 创建ZTree在HTML页面中创建一个容器元素，用于显示ZTree。

例如：<div id="treeContainer"></div>然后，在JavaScript文件中添加以下代码：(document).ready(function(){var setting = {配置项};var zNodes = [树节点数据];.fn.zTree.init(("#treeContainer"), setting, zNodes);});在上述代码中，`setting`是ZTree的配置项，可以根据需求进行个性化设置。

zTree插件使用

zTree的学习使用1.引进三个头文件<link href="~/Scripts/zTree/css/zTreeStyle/metro.css"rel="stylesheet"/><script src="~/Scripts/zTree/js/jquery-1.4.4.min.js"></script><script src="~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js"></script>[注]第一个是css样式，主要用于显示特效，第二个是jquery，因为zTree也是由jquery写成的，所以jquery必须在zTree的前面引用！第三个是zTree的js，包含其里面一些特殊的效果! 2.在页面中放置容器和ul，用于显示zTree的内容和效果<body><div class="container"><ul class="ztree"id="tree"style="width:560px;overflow:auto;"></ul></div><script type="text/javascript">//zTreejs代码部分</script></body>3．zTree树部分<script type="text/javascript">var zTree;var demoIframe;//添加功能function addHoverDom(treeId, treeNode) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;//在树节点的后面增加添加和编辑按钮var addStr = "<span class='button remove' id='removeBtn_"+treeNode.tId+ "' title='add node' onfocus='this.blur();'></span>";addStr += "<span class='button add' id='addBtn_"+treeNode.tId+"'></span>";addStr += "<span class='button edit' id=editBtn_" + treeNode.tId + "'></span>";sObj.after(addStr);var btn = $("#addBtn_" + treeNode.tId);//点击添加按钮if (btn) btn.bind("click", function () {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.addNodes(treeNode, { id: (1000 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });returnfalse;});}//删除功能function removeHoverDom(treeId, treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove(); $("#editBtn_" + treeNode.tId).unbind().remove(); $("#removeBtn_"+treeNode.tId).unbind().remove(); }//树节点的设置var setting = {//添加checkbox，true为有，false为没有check: {enable: true},//添加特殊的控件view: {addHoverDom: addHoverDom,//添加按钮removeHoverDom: removeHoverDom,//移除按钮dbClickExpand: false,//双击不可用selectedMulti: false,//多选不可用},//数据格式data: {//简单数据类型simpleData: {enable: true,idKey: "id",//节点pIdKey: "pId",//父节点rootPId: ""//根节点}},//回发操作callback: {//点击之前beforeClick: function (treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("tree");//判断是否是父节点if (treeNode.isParent) {zTree.expandNode(treeNode);returnfalse;}else {demoIframe.attr("src", treeNode.file + ".html");returntrue;}}}};//树节点内的内容var zNodes = [//基本功能演示{ id: 1, pId: 0, name: "[core] 基本功能演示", open: true },{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据", file:"core/standardData" },{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据", file:"core/simpleData" },{ id: 103, pId: 1, name: "不显示连接线", file: "core/noline" },{ id: 104, pId: 1, name: "不显示节点图标", file: "core/noicon" },{ id: 105, pId: 1, name: "自定义图标 -- icon 属性", file: "core/custom_icon" }, { id: 106, pId: 1, name: "自定义图标 -- iconSkin属性", file:"core/custom_iconSkin" },{ id: 107, pId: 1, name: "自定义字体", file: "core/custom_font" },{ id: 115, pId: 1, name: "超链接演示", file: "core/url" },{ id: 108, pId: 1, name: "异步加载节点数据", file: "core/async" },{ id: 109, pId: 1, name: "用zTree方法异步加载节点数据", file: "core/async_fun" }, { id: 110, pId: 1, name: "用zTree方法更新节点数据", file: "core/update_fun" }, { id: 111, pId: 1, name: "单击节点控制", file: "core/click" },{ id: 112, pId: 1, name: "展开 / 折叠父节点控制", file: "core/expand" },{ id: 113, pId: 1, name: "根据参数查找节点", file: "core/searchNodes" },{ id: 114, pId: 1, name: "其他鼠标事件监听", file: "core/otherMouse" },//复/单选框功能{ id: 2, pId: 0, name: "[excheck] 复/单选框功能演示", open: false },{ id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox" },{ id: 206, pId: 2, name: "Checkbox nocheck演示", file: "excheck/checkbox_nocheck"}, { id: 207, pId: 2, name: "Checkbox chkDisabled演示", file:"excheck/checkbox_chkDisabled" },{ id: 208, pId: 2, name: "Checkbox halfCheck演示", file:"excheck/checkbox_halfCheck" },{ id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count" }, { id: 203, pId: 2, name: "用zTree方法勾选 Checkbox", file:"excheck/checkbox_fun" },{ id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio" },{ id: 209, pId: 2, name: "Radio nocheck演示", file: "excheck/radio_nocheck" }, { id: 210, pId: 2, name: "Radio chkDisabled演示", file:"excheck/radio_chkDisabled" },{ id: 211, pId: 2, name: "Radio halfCheck演示", file: "excheck/radio_halfCheck"}, { id: 205, pId: 2, name: "用zTree方法勾选 Radio", file: "excheck/radio_fun" }, //编辑功能演示{ id: 3, pId: 0, name: "[exedit] 编辑功能演示", open: false },{ id: 301, pId: 3, name: "拖拽节点基本控制", file: "exedit/drag" },{ id: 302, pId: 3, name: "拖拽节点高级控制", file: "exedit/drag_super" },{ id: 303, pId: 3, name: "用zTree方法移动 / 复制节点", file: "exedit/drag_fun" }, { id: 304, pId: 3, name: "基本增 / 删 / 改节点", file: "exedit/edit" },{ id: 305, pId: 3, name: "高级增 / 删 / 改节点", file: "exedit/edit_super" },{ id: 306, pId: 3, name: "用zTree方法增 / 删 / 改节点", file: "exedit/edit_fun"}, { id: 307, pId: 3, name: "异步加载&编辑功能共存", file: "exedit/async_edit" }, { id: 308, pId: 3, name: "多棵树之间的数据交互", file: "exedit/multiTree" },//大数据演示{ id: 4, pId: 0, name: "大数据量演示", open: false },{ id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },{ id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },{ id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },//组合功能演示{ id: 5, pId: 0, name: "组合功能演示", open: false },{ id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },{ id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },{ id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },{ id: 504, pId: 5, name: "添加自定义控件", file: "super/diydom" },{ id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" }, { id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },{ id: 513, pId: 5, name: "OutLook样式的左侧菜单", file:"super/left_menuForOutLook" },{ id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },{ id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file:"super/select_menu_checkbox" },{ id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file:"super/select_menu_radio" },{ id: 508, pId: 5, name: "右键菜单的实现", file: "super/rightClickMenu" },{ id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" }, { id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" }, //其他扩展功能演示{ id: 6, pId: 0, name: "其他扩展功能演示", open: false },{ id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },{ id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },{ id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }];//初始化树$(document).ready(function () {var t = $("#tree");t = $.fn.zTree.init(t, setting, zNodes);demoIframe = $("#testIframe");demoIframe.bind("load", loadReady);var zTree = $.fn.zTree.getZTreeObj("tree");zTree.selectNode(zTree.getNodeByParam("id",101));});//数据加载function loadReady() {var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, htmlH = demoIframe.contents.find("html").get(0).scrollHeight, maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),h = demoIframe.height() >= maxH ? minH :maxH;if (h < 530) h = 530;demoIframe.height(h);}</script>4．显示的效果。

Z-Tree的应用

【简介】zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件∙兼容 IE、FireFox、Chrome 等浏览器∙在一个页面内可同时生成多个 Tree 实例∙支持 JSON 数据∙支持一次性静态生成和 Ajax 异步加载两种方式∙支持多种事件响应及反馈∙支持 Tree 的节点移动、编辑、删除∙支持任意更换皮肤 / 个性化图标（依靠css）∙支持极其灵活的 checkbox 或 radio 选择功能∙简单的参数配置实现灵活多变的功能【Z-Tree的部分函数和属性介绍】∙核心：zTree(setting, [zTreeNodes])这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

∙核心参数：settingzTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置setting 举例:Js代码1.var setting = {2. showLine: true,3. checkable: true4.};∙核心参数：zTreeNodeszTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式①带有父子关系的标准 zTreeNodes 举例:Js代码1.var zTreeNodes = [2. {"id":1, "name":"test1", "nodes":[3. {"id":11, "name":"test11", "nodes":[4. {"id":111, "name":"test111"}5. ]},6. {"id":12, "name":"test12"}7. ]},8. ......9.];②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：Js代码1.var treeNodes = [2. {"id":1, "pId":0, "name":"test1"},3. {"id":11, "pId":1, "name":"test11"},4. {"id":12, "pId":1, "name":"test12"},5. {"id":111, "pId":11, "name":"test111"},6. ......7.];【实例一】(Java代码)①在页面引用zTree的js和css：Html代码1.2.<link rel="stylesheet"href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type="text/css">3.4.<script type="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"></script>②在script脚本中定义setting和zTreeNodesJava代码1.var setting = {2. isSimpleData : true, //数据是否采用简单 Array 格式，默认false3. treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性4. treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性5. showLine : true, //是否显示节点间的连线6. checkable : true //每个节点上是否显示 CheckBox7. };8.9.var treeNodes = [10. {"id":1, "pId":0, "name":"test1"},11. {"id":11, "pId":1, "name":"test11"},12. {"id":12, "pId":1, "name":"test12"},13. {"id":111, "pId":11, "name":"test111"},14.];③在进入页面时生成树结构：Js代码1.var zTree;Js代码1.$(function() {2. zTree = $("#tree").zTree(setting, treeNodes);3. });④最后查看效果：【实例二】(从后台获取简单格式Json数据)①后台代码封装简单格式Json数据：Java代码1.public void doGetPrivilegeTree() throws IOException{2. String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";3. String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";4. String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";5. String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";6. List<String> lstTree = new ArrayList<String>();7. lstTree.add(s1);8. lstTree.add(s2);9. lstTree.add(s3);10. lstTree.add(s4);11. //利用Json插件将Array转换成Json格式12. response.getWriter().print(JSONArray.fromObject(lstTree).toString());13. }②页面使用Ajax获取zTreeNodes数据再生成树Js代码1.var setting = {2. isSimpleData : true, //数据是否采用简单 Array 格式，默认false3. treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性4. treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性5. showLine : true, //是否显示节点间的连线6. checkable : true //每个节点上是否显示 CheckBox7.};8.9.var zTree;10.var treeNodes;11.12.$(function(){13. $.ajax({14. async : false,15. cache:false,16. type: 'POST',17. dataType : "json",18. url: root+"/ospm/loginInfo/doGetPrivilegeTree.action",//请求的action路径19. error: function () {//请求失败处理函数20. alert('请求失败');21. },22. success:function(data){ //请求成功后处理函数。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

zTree的使用记录zTree是张其纲老师开发的一款免费的、功能比较全的js树形展示插件。

本文档记录使用的ztree框架的部分功能的思路，有：异步加载技术、添加复选框、单击节点名实现功能、更换节点图标。

显示如下图：参考张其纲老师的首页实例，地址：http://www.ztree.me/v3/demo.php#_402页面如下：树已经初始化完，在页面中显示的位置如下：Js代码：//设置树的初始值var setting = {async: {enable: true,url: getUrl},data: {simpleData: {enable: true}},check: {//是否支持复选框enable: true},callback: {beforeExpand: beforeExpand,onAsyncSuccess: onAsyncSuccess,onAsyncError: onAsyncError,onCheck: onCheck,//选中时触发的事情onClick:onClick //单机触发的时间}};var log, className = "dark", perCount = 100, perTime = 100;//初始化AJAX异步调用时的URL值function getUrl(treeId, treeNode) {var curCount = (treeNode.children) ? treeNode.children.length : 0;var getCount = (curCount + perCount) > treeNode.count ? (treeNode.count - curCount) : perCount;var param = "id="+treeNode.id + "&isCheck=" + treeNode.checked;return ".. /getNodesForBigData.php?" + param;//AJAX异步交互的地址}//展开节点异步取子节点之前调用的函数function beforeExpand(treeId, treeNode) {if (!treeNode.isAjaxing) {treeNode.times = 1;ajaxGetNodes(treeNode, "refresh");return true;} else {alert("zTree 正在下载数据中，请稍后展开节点。

");return false;}}//AJAX异步交互成功时调用的函数function onAsyncSuccess(event, treeId, treeNode, msg) { if (!msg || msg.length == 0) {return;}var zTree = $.fn.zTree.getZTreeObj("treeDemo"),totalCount = treeNode.count;if (treeNode.children.length < totalCount) {setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);} else {treeNode.icon = "";zTree.updateNode(treeNode);zTree.selectNode(treeNode.children[0]);}}//AJAX异步交互出错时调用的函数function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");alert("异步获取数据出现异常。

");treeNode.icon = "";zTree.updateNode(treeNode);}//AJAX交互得到信息function ajaxGetNodes(treeNode, reloadType) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");if (reloadType == "refresh") {treeNode.icon = "../img/loading.gif";//异步加载数据时显示的图片zTree.updateNode(treeNode);}zTree.reAsyncChildNodes(treeNode, reloadType, true);}//单击是所触发的时间function onClick(e,treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),checkCount = zTree.getCheckedNodes(true).length;if(checkCount > 0){clearCheckedNodes();}//触发进行业务逻辑的处理的信息…………}//当单机选中复选框的时候进行的处理function onCheck(e, treeId, treeNode){var ids = '';var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getCheckedNodes(true);for (var i=0, l=nodes.length; i<l; i++) {ids += nodes[i].id;if(i != l-1)ids += ",";}//把得到的已选择的节点ID集合进行其他处理…………}//清空已经选中的树的数据function clearCheckedNodes() {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getCheckedNodes(true);for (var i=0, l=nodes.length; i<l; i++) {nodes[i].checked = false;zTree.updateNode(nodes[i]);}}//进行树中已经选中的统计的函数function count() {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),checkCount = zTree.getCheckedNodes(true).length,//所有选中的节点nocheckCount = zTree.getCheckedNodes(false).length,//所有未选中的changeCount = zTree.getChangeCheckedNodes().length;//新更改的节点}//初始化时的树节点信息var zNodes =[{name:'北京',id:3038, checked:false,isParent:true, open:true},{name:'上海',id:3091, checked:false,isParent:true, open:true},{name:'上海1',id:3107, checked:false},{name:'天津',id:3040, checked:false,isParent:true, open:true}];//初始化页面的树$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});说明：异步加载数据时数据返回的样式为：[{name:'复兴路',id:3046,pId:3045, checked:false,isParent:true, open:true},{name:'啊啊大', id:42, pId:3045, checked:false,icon:'/website/employee/img/diy/3.png'}]其中：icon:'/website/employee/img/diy/3.png'为该节点要显示的节点图标，checked:false表示：如果父节点在异步加载前是选中状态则用checked:true表示选中。

Java后台编好要向前台显示的JSON形式的字符串之后发送的编码为：response.setContentType("application/x-json;charset=UTF-8"); try{PrintWriter pw = response.getWriter();pw.println(string);pw.flush();pw.close();}catch (IOException e){e.printStackTrace();}。