zTree树结构与EasyUI Layout综合使用详解

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.js，受益一生，十分钟学会使用tree树形结构插件

使⽤ztree.js，受益⼀⽣，⼗分钟学会使⽤tree树形结构插件看到ztree.js，这⼏个字眼，⽏庸置疑，那肯定就是tree树形结构了，曾经的swing年代有jtree，后来jquery年代有jstree和treeview，虽然我没写过，但是我见过，⼀些⼩功能做起来⽐较繁琐，⼏个功能做了⼀个⽉，当然了有能⼒的关系，也有插件易⽤度的关系最近要实现的功能⽤tree树形结构来做是最好的，就是资源的分配，来简单讲讲ztree吧，这是⽬前国内很⽕的⼀个插件，百度⼀下就能了解，使⽤起来⼗分简单⼩编我⽤过3年的jqgrid，在此还是要再次感谢当年的王组让我去跟jqgrid深⼊浅出，多⽤了jqgrid后，再看ztree，那就⼗分简单了，不知道ztree作者是否也参考过jqgrid⾸先你需要引⼊js以及css吧<link href="<%=request.getContextPath()%>/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet"><script src="<%=request.getContextPath()%>/js/ztree/jquery.ztree.core.js"></script>然后你需要定义⼀个id="treePermission"，这点和jqgrid⼀样<div class="zTreeDemoBackground left"><ul id="treePermission" class="ztree"></ul></div>定义⼀下数据结构和基本配置var setting = {async: {enable: true,url: getAsyncUrl,autoParam: ["id"]},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}}};// 查询⼦节点function getAsyncUrl(treeId, treeNode) {return "<%=request.getContextPath()%>/auth/permission/getTreeSubNode";}var zNodes =[{ id:1, pId:0, name:"⽗节点1 - 展开", open:true},{ id:11, pId:1, name:"⽗节点11 - 折叠"},{ id:111, pId:11, name:"叶⼦节点111"},{ id:112, pId:11, name:"叶⼦节点112"},{ id:113, pId:11, name:"叶⼦节点113"},{ id:114, pId:11, name:"叶⼦节点114"},{ id:12, pId:1, name:"⽗节点12 - 折叠"},{ id:121, pId:12, name:"叶⼦节点121"},{ id:122, pId:12, name:"叶⼦节点122"},{ id:123, pId:12, name:"叶⼦节点123"},{ id:124, pId:12, name:"叶⼦节点124"},{ id:13, pId:1, name:"⽗节点13 - 没有⼦节点", isParent:true},{ id:2, pId:0, name:"⽗节点2 - 折叠"},{ id:21, pId:2, name:"⽗节点21 - 展开", open:true},{ id:211, pId:21, name:"叶⼦节点211"},{ id:212, pId:21, name:"叶⼦节点212"},{ id:213, pId:21, name:"叶⼦节点213"},{ id:214, pId:21, name:"叶⼦节点214"},{ id:22, pId:2, name:"⽗节点22 - 折叠"},{ id:221, pId:22, name:"叶⼦节点221"},{ id:222, pId:22, name:"叶⼦节点222"},{ id:223, pId:22, name:"叶⼦节点223"},{ id:224, pId:22, name:"叶⼦节点224"},{ id:23, pId:2, name:"⽗节点23 - 折叠"},{ id:231, pId:23, name:"叶⼦节点231"},{ id:232, pId:23, name:"叶⼦节点232"},{ id:233, pId:23, name:"叶⼦节点233"},{ id:234, pId:23, name:"叶⼦节点234"},{ id:3, pId:0, name:"⽗节点3 - 没有⼦节点", isParent:true}];$(document).ready(function(){$.post("<%=request.getContextPath()%>/auth/permission/getTreeRootNode",{},function(jsonResult){$.fn.zTree.init($("#treePermission"), setting, jsonResult.data);});});zNodes是初始化的静态数据，可以不⽤，这⾥为了⽅便贴了出来，初始化的时候放⼊.fn.zTree.init(("#treePermission"), setting, zNodes);即可znodes我没有使⽤，在初始化的时候会预先加载根⽬录，然后点击再次加载⼦⽬录@Overridepublic List<TreeNode> queryNode(Integer parentId) {SysPermissionExample example = new SysPermissionExample();Criteria criteria = example.createCriteria();criteria.andParentidEqualTo(parentId);List<SysPermission> permissions = sysPermissionMapper.selectByExample(example);// 如果为空，说明没有根权限，需要创建⼀个if (permissions.isEmpty()) {return null;}// 获得根权限返回出去List<TreeNode> rootNodeList = new ArrayList<TreeNode>();for (SysPermission p : permissions) {TreeNode rootNode = new TreeNode(p.getId(), p.getParentid(), p.getName(),p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false,p.getType() == ShiroPermissionTypeEnum.MENU.value ? true : false);rootNodeList.add(rootNode);}return rootNodeList;}@RequestMapping(value="/permission/getTreeSubNode")@ResponseBodypublic List<TreeNode> getTreeSubNode(TreeNode node) throws Exception{List<TreeNode> rootNodeList = systemAuthService.queryNode(node.getId());return rootNodeList;}好了，调⽤后就直接可以使⽤了，⾮常简单，还有⼀些简单配置请参考官⽹吧~Processing math: 0%。

jQuery树控件zTree使用方法详解（一）

jQuery树控件zTree使⽤⽅法详解（⼀）⼀、节点模糊搜索功能：搜索成功后，⾃动⾼亮显⽰并定位、展开搜索到的节点。

⼆、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。

前台代码如下：js：<script type="text/javascript">//ztree设置var setting = {view: {fontCss: getFontCss},check: {enable: true},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}},async: {enable: true,url: "#{getStudentsJsonUrl}",autoParam: ["id", "level"]},callback: {beforeCheck: zTreeBeforeCheck,onNodeCreated: zTreeOnNodeCreated,beforeExpand: zTreeBeforeExpand}};var reloadFlag = false; //是否重新异步请求var checkFlag = true; //是否选中//节点展开前function zTreeBeforeExpand(treeId, treeNode) {reloadFlag = false;return true;};//节点创建后function zTreeOnNodeCreated(event, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (reloadFlag) {if (checkFlag) {zTree.checkNode(treeNode, true, true);}if (!treeNode.children) {zTree.reAsyncChildNodes(treeNode, "refresh");}}};//选中节点前function zTreeBeforeCheck(treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (!treeNode.children) {reloadFlag = true;checkFlag = true;zTree.reAsyncChildNodes(treeNode, "refresh");}return true;}//页⾯加载完成_run(function () {require(['zTree/js/jquery.ztree.all-3.5'], function () {$.ajax({type: "POST",url: "#{getStudentsJsonUrl}",success: function (data) {if (data && data.length != 0) { //如果结果不为空$.fn.zTree.init($("#tree"), setting, data);}else { //搜索不到结果}}});});//提交$("#inputSubmit").click(function () {var zTree = $.fn.zTree.getZTreeObj("tree");var nodes = zTree.getCheckedNodes(true);var ids = "";var names = "";for (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合if (!nodes[i].isParent) {ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";names += nodes[i].name + ",";}}Simpo.ui.box.hideBox();parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1)); parent.$(".boxFrm").contents().find("#hidRange").val(ids.substr(0, ids.length - 1));})});//查找节点var lastNodeList = [];var lastKey;function searchNode() {var zTree = $.fn.zTree.getZTreeObj("tree");var key = $.trim($("#inputSearchNode").val());if (key != "" && key != lastKey) {nodeList = zTree.getNodesByParamFuzzy("name", key);for (var i = 0, l = lastNodeList.length; i < l; i++) { //上次查询的节点集合取消⾼亮lastNodeList[i].highlight = false;zTree.updateNode(lastNodeList[i]);}zTree.expandAll(false); //全部收缩if (nodeList.length > 0) {for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合if (nodeList[i].getParentNode()) {zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其⽗节点}nodeList[i].highlight = true;zTree.updateNode(nodeList[i]);}}zTree.refresh(); // 很重要，否则节点状态更新混乱。

JQueryZTree使用方法详解

JQueryZTree使⽤⽅法详解JQuery ZTree简单使⽤@(JavaScript)[jQuery, ztree, ⼊门]基本概述zTree 是⼀个依靠 jQuery 实现的多功能 “树插件”。

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

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

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

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

——参考《百度百科》官⽹：PS：zTree的官⽅API⽂档和demo挺详细的，值得⼀读。

案例使⽤标准json数据构造ztree<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>ztree测试</title><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script><link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css"><script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script><script type="text/javascript">$(function(){$("#btn").click(function() {var isExists = $("#et").tabs("exists", "标题");if(isExists) {$("#et").tabs("select","标题");} else {$("#et").tabs("add", {title:"标题",closable:true,iconCls:"icon-save",content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"});}});});</script><script type="text/javascript">$(function() {var setting = {};var zNodes = [{name:'结点1',children:[{name:'结点11'},{name:'结点12'}]},{name:'结点2'},{name:'结点3'}];$.fn.zTree.init($("#ztree1"), setting, zNodes);});</script></head><body class="easyui-layout"><div style="height: 100px;" data-options="region:'north'">北部区域</div><div style="width: 200px;" data-options="region:'west'"><div class="easyui-accordion" data-options="fit:true"><div data-options="iconCls:'icon-save'" title="系统菜单"><a id="btn" class="easyui-linkbutton">按钮</a></div><div data-options="iconCls:'icon-remove'" title="业务菜单"><ul id="ztree1" class="ztree"></ul></div><div data-options="iconCls:'icon-remove'" title="功能菜单">内容3</div><div data-options="iconCls:'icon-remove'" title="⾮功能菜单">内容4</div></div></div><div style="" data-options="region:'center'"><div id="et" class="easyui-tabs" data-options="fit:true"><div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div> <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div></div></div><div style="width: 100px;" data-options="region:'east'">东部区域</div><div style="height: 50px;" data-options="region:'south'">南部区域</div></body></html>使⽤简单json数据构造ztree<div data-options="iconCls:'icon-remove'" title="功能菜单"><ul id="ztree2" class="ztree"></ul></div><script type="text/javascript">$(function() {var setting = {data: {simpleData: {enable: true}}};var zNodes = [{"id":1, "pId":0, "name":"test1"},{"id":11, "pId":1, "name":"test11"},{"id":12, "pId":1, "name":"test12"},{"id":111, "pId":11, "name":"test111"},{"id":2, "pId":0, "name":"test2"},{"id":3, "pId":0, "name":"test3"},{"id":31, "pId":2, "name":"test31"}];$.fn.zTree.init($("#ztree2"), setting, zNodes);});</script>发送ajax请求获取动态json数据构造ztreejson内容[{ "id":"11", "pId":"0", "name":"菜单1"},{ "id":"111", "pId":"11", "name":"菜单11", "page":"xx.action"},{ "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},{ "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},{ "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},{ "id":"12", "pId":"0", "name":"菜单2"},{ "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},{ "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},{ "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},{ "id":"13", "pId":"0", "name":"菜单3"},{ "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},{ "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}]html⽚段<div data-options="iconCls:'icon-remove'" title="⾮功能菜单"><ul id="ztree3" class="ztree"></ul></div><script type="text/javascript">$(function() {var setting = {data: {simpleData: {enable: true}}};$.ajax({url:'${pageContext.request.contextPath}/json/menu.json',type:'get',data:'',dataType:'json',success:function (data) {$.fn.zTree.init($("#ztree3"), setting, data);}});});</script>为ztree节点绑定事件动态添加选项卡json内容[{ "id":"11", "pId":"0", "name":"菜单1"},{ "id":"111", "pId":"11", "name":"菜单11", "page":"xx.action"},{ "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},{ "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},{ "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},{ "id":"12", "pId":"0", "name":"菜单2"},{ "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},{ "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},{ "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},{ "id":"13", "pId":"0", "name":"菜单3"},{ "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},{ "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}]html⽂件<div data-options="iconCls:'icon-save'" title="ztree事件"><ul id="ztree4" class="ztree"></ul></div><script type="text/javascript">$(function() {var setting = {data: {simpleData: {enable: true}},callback: {onClick: function(event, treeId, treeNode) {if(treeNode.page != undefined) {var isExists = $("#et").tabs("exists", );if(isExists) {$("#et").tabs("select", );} else {$("#et").tabs("add", {title:,closable:true,iconCls:"icon-edit",content:"<iframe frameborder='no' height='100%' width='100%' src='"+ treeNode.page +"'></iframe>" });}}}}};$.ajax({url:'${pageContext.request.contextPath}/json/menu.json',type:'get',data:'',dataType:'json',success:function (data) {$.fn.zTree.init($("#ztree4"), setting, data);}});});</script>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

z-Tree说明书

目录1 关于z-Tree (4)1.1 手册使用样式 (5)2 入门 (6)2.1 术语.................................................................................... .6 2.2 公共物品实验向导 (7)2.3 第一次测试处理 (13)3 处理的详述 (17)3.1 无交互简单实验 (17)3.1.1数据结构和简单设计 (17)3.1.2注释 (20)3.1.3简单的行为 (21)3.1.4步骤树 (22)3.1.5数据显示和输入 (23)3.1.6 Profit变量和TotalProfit变量 (24)3.1.7例子：计算练习（guess_sin.ztt） (25)3.2 交互实验：对称博弈 (26)3.2.1Table functions (26)3.2.2其他表中的Table functions (27)3.2.3条件执行 (27)3.2.4对不同受试者计算不同的值 (29)3.2.5操作范围符 (30)3.2.6一个组里面表格函数对成员的限制 (30)3.2.7基本的组配对 (31)3.2.8例子：等级依赖支付 (33)3.3 非对称式，同时博弈 (34)3.3.1条件执行 (34)3.3.2对不同受试者计算不同的值 (36)3.3.3参数表 (36)3.3.4重要的参数 (38)3.3.5组配对 (39)3.3.6练习：一般2x2博弈（博弈222） (39)3.3.7练习：程序中的组定义 (41)3.4 屏幕布局 (42)3.4.1小的布局：项目 (42)3.4.2大的布局：屏幕设计与盒子 (44)3.4.3放置盒子 (44)3.4.4 基本盒类型 (46)3.4.5 按钮位置 (49)3.4.6 背景布局 (50)3.4.7 文本中插入变量 (50)3.4.8 RTF文本格式 (52)3.5 顺序博弈 (52)3.5.1 顺序移动 (53)3.5.2 同时在不同的步骤 (54)3.5.3 步骤的结束 (55)3.5.4 例子：最后通牒博弈 (55)3.6 连续性拍卖市场 (57)3.6.1 概念 (57)3.6.2 合同表中的一个双向拍卖 (59)3.6.3 准备拍卖的布局 (60)3.6.4 要价 (60)3.6.5 搜索信息 (61)3.6.6 作出声明 (62)3.6.7 接受报盘 (63)3.6.8 坚持受试者的输入 (64)3.6.9 拍卖步骤详述 (65)3.6.10 在程序中创建新的记录 (65)3.6.11 加入质量 (66)3.7 发布报价市场 (66)3.8 时钟拍卖 (67)3.8.1 荷兰式拍卖 (67)3.8.2 离开一个步骤 (68)3.9 先进理念 (69)3.9.1 博弈依赖于先前的结果 (69)3.9.2 新表的定义 (69)3.9.3 有条件执行的语句............ (71)3.9.4 循环：while和repeat (72)3.9.5 复杂的移动结构 (73)3.9.6 不定长处理 (74)3.9.7 例子：战略方法（使用数组） (75)3.9.8 开启和关闭信息 (76)3.9.9 在会话表中从处理复制数据到处理 (76)4 问卷 (77)4.1 概观 (77)4.2 市场问卷 (77)4.2.1 地址表 (77)1关于z-Treez-Tree程序是由苏黎世大学开发的。

Ztree使用方法

Ztree使用方法1.首先在页面上有<ul/>标签<ul id="tree"class="ztree"></ul>2.定义ztree的配置参数var setting = {view : {selectedMulti : false},data : {key : {title : "valuesName",name : "valuesName"},simpleData : {enable : true,idKey : "dataValues",pIdKey : "parentId"}},check : {enable : false},callback : {onClick : onClick}};以上是常用配置,具体参见ztree api 的setting部分3.获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据a)Ztree的数据有两种格式,标准格式如下:o标准的JSON 数据需要嵌套表示节点的父子包含关系例如：var nodes = [{name: "父节点1",open:true, children: [{name: "子节点1"},{name: "子节点2"}]}];b)简单数据格式如下(推荐使用):o简单模式的JSON 数据需要使用id / pId 表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考setting.data.simple 内各项说明例如：var nodes = [{id:1, pId:0, name: "父节点1"},{id:11, pId:1, name: "子节点1"},{id:12, pId:1, name: "子节点2"}];简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式.var setting = {data: {simpleData: {enable: true}}};4.初始化ztree生成树$.fn.zTree.init($("#tree"), setting, nodes);第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.例子:HTML中<ul id="tree"class="ztree"></ul>Js中var setting = {view : {selectedMulti : false},data : {key : {title : "valuesName",name : "valuesName"},simpleData : {enable : true,idKey : "dataValues",pIdKey : "parentId"}},check : {enable : false},callback : {onClick : onClick}};function onClick(event, treeId, treeNode, clickFlag) {alert("treeId:" + treeId + " name:" + + " level:"+ treeNode.level + " tid:" + treeNode.tId + " parentTId:"+ treeNode.parentTId + " children:" + treeNode.children); }$(function() {$.fn.zTree.init($("#tree"), setting, $.parseJSON(tdata)); }5.zTreeObj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:var treeObj = $.fn.zTree.getZTreeObj("tree"); //参数为树的id具体方法都有哪些参见api的zTreeObj部分常用方法介绍:a)zTreeObj.getNodeByParam(key, value, parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据JSON 对象Key String需要精确匹配的属性名称Value ?需要精确匹配的属性值，可以是任何类型，只要保证与key 指定的属性值保持一致即可parentNode JSON搜索范围，指定在某个父节点下的子节点中进行搜索忽略此参数，表示在全部节点中搜索返回值JSON匹配精确搜索的节点数据1、如无结果，返回null2、如有多个节点满足查询条件，只返回第一个匹配到的节点var treeObj = $.fn.zTree.getZTreeObj("tree");var node = treeObj.getNodeByParam("id", 1, null);b)zTreeObj.getNodes()获取zTree 的全部节点数据返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getNodes();c) zTreeObj.getSelectedNodes()获取zTree 当前被选中的节点数据集合返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();d)zTreeObj.expandAll(flag) 展开/ 折叠全部节点flag Boolean true表示展开,false表示折叠返回值Boolean返回值表示最终实际操作情况true 表示展开全部节点false 表示折叠全部节点null 表示不存在任何父节点var treeObj = $.fn.zTree.getZTreeObj("tree");treeObj.expandAll(true);e) zTreeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag) 展开/ 折叠指定的节点treeNodeJSON需要展开/ 折叠的节点数据请务必保证此节点数据对象是zTree 内部的数据对象expandFlagBooleanexpandFlag = true 表示展开节点expandFlag = false 表示折叠节点省略此参数，则根据对此节点的展开状态进行toggle 切换sonSignBooleansonSign = true 表示全部子孙节点进行与expandFlag 相同的操作sonSign = false 表示只影响此节点，对于其子孙节点无任何影响sonSign = false 且treeNode.open = expandFlag 时，不会触发回调函数，直接返回省略此参数，等同于falsefocusBooleanfocus = true 表示展开/ 折叠操作后，通过设置焦点保证此焦点进入可视区域内focus = false 表示展开/ 折叠操作后，不设置任何焦点省略此参数，等同于truecallbackFlagBooleancallbackFlag = true 表示执行此方法时触发beforeExpand / onExpand 或beforeCollapse / onCollapse 事件回调函数callbackFlag = false 表示执行此方法时不触发事件回调函数省略此参数，等同于false返回值Boolean返回值表示最终实际操作情况true 表示展开节点false 表示折叠节点null 表示不是父节点var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();if (nodes.length>0) {treeObj.expandNode(nodes[0], true, true, true);}6.treeNode 树节点对象每一个treeNode对象都有N多属性和方法,具体参见api 的treeNode部分常用示例:a)treeNode.isParent 判断节点是否是父节点b) 节点名称c)treeNode.children获取节点的子节点数据集合d)treeNode.getParentNode获取父节点e)treeNode.level 获取节点的层级,根节点的level为0f)treeNode.tId生成的树的节点的html id,区别于主键idg)treeNode.parentTId获取的父节点的tIdh)绑定到树上的其他字段可以通过treeNode对象直接获取,如:treeNode.phone。

基于zTree树形菜单的使用实例

基于zTree树形菜单的使⽤实例在每个节点添加 id 和 pid， id 表⽰当前节点编号，pid 表⽰⽗节点编号第⼀步：在页⾯显⽰菜单位置，添加 ul设置 class=”ztree”第⼆步：开启简单数据格式⽀持第三步：编写树形菜单数据第四步：⽣成树形菜单<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ztree树形菜单的使⽤</title><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" ><script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script><script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" /><script type="text/javascript">//页⾯加载后执⾏$(function() {//1.进⾏ztree树形菜单设置，开启简单json数据⽀持var setting = {data:{simpleData:{enable:true//开启简单json数据格式⽀持}}};//2.提供ztree树形菜单数据var zNodes = [{id:1,pId:0,name:"⽗节点⼀"},{id:2,pId:0,name:"⽗节点⼆"},{id:11,pId:1,name:"⼦节点⼀"},{id:12,pId:1,name:"⼦节点⼆"},{id:13,pId:2,name:"⼦节点三"},{id:14,pId:2,name:"⼦节点四"}];//3.⽣成树形菜单$.fn.zTree.init($("#baseMenu"),setting,zNodes);});</script></head><body class="easyui-layout"><div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div><div data-options="region:'west',title:'菜单导航'" style="width:200px"><div class="easyui-accordion" data-options="fit:true"><div data-options="title:'基础菜单'"><ul id="baseMenu" class="ztree"></ul></div><div data-options="title:'系统菜单'">你我他学习吧</div></div></div><div data-options="region:'center',title:'中部区域'"><div id="mytabs" class="easyui-tabs" data-options="fit:true"><div data-options="title:'CSDN博客',closable:true">选项卡⾯板⼀</div><div data-options="title:'博客园',closable:true">选项卡⾯板⼆</div></div></div><div data-options="region:'east',title:'东部区域'" style="width:100px"></div><div data-options="region:'south',title:'南部区域'" style="height:100px"></div></body></html>以上这篇基于zTree树形菜单的使⽤实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

Ztree树使用详解

Ztree树使⽤详解0 zTree简介树形控件的使⽤是应⽤开发过程中必不可少的。

zTree 是⼀个依靠 jQuery 实现的多功能 “树插件”。

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

0.0 zTree的特点 ·最新版的zTree将核⼼代码按照功能进⾏了分割，不需要的代码可以不⽤加载，如普通使⽤只需要加载核⼼的jquery.ztree.core-3.5.js，需要使⽤勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使⽤编辑功能加载jquery.ztree.exedit-3.5.min.js·采⽤了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀·兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器·⽀持 JSON 数据·⽀持静态和 Ajax 异步加载节点数据·⽀持任意更换⽪肤 / ⾃定义图标（依靠css）·⽀持极其灵活的 checkbox 或 radio 选择功能·提供多种事件响应回调·灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽·在⼀个页⾯内可同时⽣成多个 Tree 实例·简单的参数配置实现，灵活多变的功能0.1 zTree⽂件介绍从zTree官⽹下载的zTree包括以下组成部分·metroStyle⽂件夹：zTree的metro风格样式相关⽂件（图⽚及css样式表）。

·zTreeStyle⽂件夹：zTree的标准风格样式⽂件夹（图⽚及css样式表）·js⽂件：zTree.all.js是完整的js库，可单纯加载此⽂件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进⾏的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

ztree.reasyncchildnodese的用法

ztree.reasyncchildnodese的用法在ZTree（JavaScript 树状结构插件）中，`zTree` 提供了`reAsyncChildNodes` 方法，用于重新异步加载子节点。

该方法适用于异步加载数据的场景，例如通过AJAX 请求从服务器获取子节点数据。

以下是`reAsyncChildNodes` 方法的基本用法：```javascript// 假设zTreeObj 是你创建的ZTree 实例var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");// 获取某个节点var treeNode = zTreeObj.getNodeByTId("treeDemo_1");// 调用reAsyncChildNodes 方法重新加载子节点数据zTreeObj.reAsyncChildNodes(treeNode, "refresh", true);```上述代码中，`reAsyncChildNodes` 方法接受三个参数：1. `treeNode`: 要重新加载子节点的树节点对象。

2. `type`: 操作类型，"refresh" 表示刷新子节点。

3. `isSilent`: 是否静默加载，如果为`true`，则不显示加载提示。

在实际应用中，你需要根据具体的场景和需求调用该方法。

通常，当某个节点需要更新子节点时，可以调用`reAsyncChildNodes` 方法触发异步加载。

注意：在使用`reAsyncChildNodes` 方法之前，确保你已经正确配置了ZTree，并且节点设置了相应的异步加载参数，包括异步加载的URL、数据格式等。

具体配置可参考ZTree 的文档或示例代码。

使用ztree展示树形菜单结构

使⽤ztree展⽰树形菜单结构⼀、功能简介在权限系统中，实现给⾓⾊指定菜单权限的功能。

主要包括以下⼏点：读取全部菜单项，并以树形结构展现；勾选⾓⾊拥有的菜单权限，保存⼊库；重新编辑⾓⾊权限时，默认选中⾓⾊已有的菜单权限。

⼆、界⾯三、实现过程1.在服务端获取全部菜单资源，并转换为json字符串。

@RequestMapping("/edit")public String edit(Integer roleId, Model model) {……//树形菜单资源List<Map<String, Object>> allResources = resourceService.getTreeMap();//当前⾓⾊已有资源，设置checked和open属性if (roleId != null) {Set<CmsResource> roleResources = resourceService.findByRoleId(roleId);if (roleResources != null && !roleResources.isEmpty()) {for (Map<String, Object> resource : allResources) {Integer id =(Integer)resource.get("id");for (CmsResource roleResource : roleResources) {if (roleResource.getResourceId().equals(id)) {resource.put("checked", true);resource.put("open", true);break;}}}}}//转换为json字符串String resourceJson = new Gson().toJson(allResources);model.addAttribute("resourceJson", resourceJson);return "/role/edit";}其中resourceService.getTreeMap()⽅法⽤来获取全部菜单资源，主要包括这⼏个字段：id,name,pId,open。

jQuery树插件zTree使用方法详解

jQuery树插件zTree使⽤⽅法详解最近要做⼀个树结构，就使⽤了jQuery 的树插件，感觉还不错，做个随笔页⾯的基本结构是这样的这⾥的样式是使⽤了metroStyle⽂件夹⾥的类bootstrap风格，当然⾸先需要下载ztree插件，直接百度即可，下载完成后由对应的api和⼀些例⼦，这⾥使⽤的是复选框模板jQuery zTree树的页⾯jsp如下：<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title> ZTREE DEMO - checkbox</title><link rel="stylesheet" href="/css/demo.css" rel="external nofollow" ><link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" ><script type="text/javascript" src="/js/jquery-3.2.1.js"></script><script type="text/javascript" src="/js/jquery.ztree.core.js"></script><script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script><script type="text/javascript">var setting = {check: {enable: true},data: {simpleData: {enable: true}},callback:{onCheck:onCheck}};// var zNodes =[// { id:1, pId:0, name:"随意勾选 1", open:true},// { id:11, pId:1, name:"随意勾选 1-1", open:false},// { id:111, pId:11, name:"随意勾选 1-1-1"},// { id:112, pId:11, name:"随意勾选 1-1-2"},// { id:12, pId:1, name:"随意勾选 1-2", open:false},// { id:121, pId:12, name:"随意勾选 1-2-1"},// { id:122, pId:12, name:"随意勾选 1-2-2"},// { id:2, pId:0, name:"随意勾选 2", checked:false, open:false},// { id:21, pId:2, name:"随意勾选 2-1"},// { id:22, pId:2, name:"随意勾选 2-2", open:false},// { id:221, pId:22, name:"随意勾选 2-2-1", checked:false},// { id:222, pId:22, name:"随意勾选 2-2-2"},// { id:23, pId:2, name:"随意勾选 2-3"},// { id:3, pId:0, name:"随意勾选 3", checked:false, open:false},// { id:231, pId:3, name:"随意勾选 3-1"},// { id:232, pId:3, name:"随意勾选 3-2", open:false},// { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false},// { id:2322, pId:232, name:"随意勾选 3-2-2"},// { id:233, pId:3, name:"随意勾选 3-3"}// ];var code;function setCheck() {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),py = $("#py").attr("checked")? "p":"",sy = $("#sy").attr("checked")? "s":"",pn = $("#pn").attr("checked")? "p":"",sn = $("#sn").attr("checked")? "s":"",type = { "Y":py + sy, "N":pn + sn};zTree.setting.check.chkboxType = type;// showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');// showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };');showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };');// setting.check.chkboxType = { "Y" : "", "N" : "" };}function showCode(str) {if (!code) code = $("#code");code.empty();code.append("<li>"+str+"</li>");}var zNodes =[];$(document).ready(function(){var t = $("#treeDemo");$.ajax({type: "POST",url: "/Units/ListTree",dataType: 'json',success: function(result) {console.log(result);$.extend( true, zNodes, result );console.log(zNodes);t = $.fn.zTree.init(t, setting, zNodes);// demoIframe = $("#testIframe");}});});$(document).ready(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);setCheck();$("#py").bind("change", setCheck);$("#sy").bind("change", setCheck);$("#pn").bind("change", setCheck);$("#sn").bind("change", setCheck);});function onCheck(e,treeId,treeNode){var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),nodes=treeObj.getCheckedNodes(true),v="";for(var i=0;i<nodes.length;i++){v+=nodes[i].name + ",";alert(nodes[i].id); //获取选中节点的值}}</script></head><body><div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;"><ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul></div><input type="checkbox" id="py" class="checkbox first" checked style="display:none;" /><input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/><input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/><input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/></body></html>上⾯的死数据替换为后台赋予的值，⽤的是ajax⽅式，当然后台需要⽤json⽅式进⾏交互java代码控制器代码如下：@Controller@RequestMapping("/Units")public class UnitsController{@Autowiredprivate UnitsService unitsService;@RequestMapping("/ListTree")@ResponseBodypublic List<JSONObject> ListTree(){List<JSONObject> jsonList = new ArrayList<JSONObject>();List<Units> zTreeAll = unitsService.zTreeAll();for (Units units : zTreeAll) {JSONObject json = new JSONObject();// { id:1, pId:0, name:"随意勾选 1", open:false}if(units.getUnitsId() == units.getNodeData()){JSONObject json1 = new JSONObject();json1.put("id", units.getUnitsId());json1.put("pId", 0);json1.put("name", units.getUnitsName());json1.put("open", false);jsonList.add(json1);json.put("id", -1);json.put("pId", units.getNodeData());json.put("name", units.getSectorName());json.put("open", false);}else{json.put("id", units.getUnitsId());json.put("pId", units.getNodeData());json.put("name", units.getSectorName());json.put("open", false);}jsonList.add(json);}// for (JSONObject units : jsonList) {// System.out.println(jsonList.toString());// }return jsonList;}}这样就可以实现所需要的树结构，ztree树是可以⽆限扩展的，就按照个⼈所需，来选择模板就可以了jsp中的这段代码是获得当前选择值得idfunction onCheck(e,treeId,treeNode){var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),nodes=treeObj.getCheckedNodes(true),v="";for(var i=0;i<nodes.length;i++){v+=nodes[i].name + ",";alert(nodes[i].id); //获取选中节点的值}}以上就是使⽤ztree的基本⽅法，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

ztree用法(一)

ztree用法(一)zTree的用法详解zTree 是一款基于 jQuery 的快速、简便和免费的前端树形插件，它能够使用户快速地构建一个功能丰富的树形结构。

1. 初始化在使用 zTree 之前，需要先初始化一个 zTree 实例。

以下是初始化 zTree 的基本代码：var zTreeObj = $.($("#treeDemo"), setting, zNodes);•#treeDemo是用于展示 zTree 的 HTML 容器，通过 ID 选择器获取。

•setting是一个配置项，用于设定 zTree 的一些参数。

•zNodes是一个 JSON 数组，用于存放树形结构的节点数据。

2. 设置配置项使用 zTree 进行初始化之前，还需要配置一些参数。

以下是一些常用的配置项：•data: 用于设置节点的数据加载方式，可以是静态数据也可以是通过异步加载数据。

•callback: 用于设置各种回调函数，例如点击节点时的回调函数、展开折叠节点时的回调函数等。

•view: 用于设置节点的显示方式，可以自定义节点的图标、字体等样式。

var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "parentId"}},callback: {onClick: onClick,onExpand: onExpand},view: {fontCss: getFontCss}};3. 加载静态数据zTree 支持通过静态数据来构建树形结构。

以下是一个示例的静态数据结构：var zNodes = [{ id:1, pId:0, name:"父节点1"},{ id:11, pId:1, name:"子节点1"},{ id:12, pId:1, name:"子节点2"}];其中，每个节点对象包含id、pId和name属性，分别代表节点的唯一标识、父节点的标识和节点的名称。

zTree的使用教程

zTree的使⽤教程2、之后引⼊：<script src="js/jquery.ztree.all-3.5.js"></script><link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">3、写js：<script type="text/javascript">var setting= {data: {simpleData: {enable: true}},check: {enable: true,chkStyle: "radio",radioType: "all"},view: {showLine: true},callback: {onClick: onClick,onCheck: onCheck,}};var zNodes =[<#if selectNewsTypeAll?size gt 0><#list selectNewsTypeAll as sNewsTypeAll>{id:${sNewsTypeAll.id}, pId:${sNewsTypeAll.parentId}, name:"${}"},</#list></#if>];$(document).ready(function() {$.fn.zTree.init($("#treeConfig"), setting, zNodes);});function onClick(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false;}function onCheck(e,treeId,treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeConfig"),nodes = zTree.getCheckedNodes(true);var name = "", id = "";for (var i = 0, l = nodes.length; i < l; i++) {name = nodes[i].name;newsTypeId = nodes[i].id;}$("#treeName").val(name);$("#treeId").val(id);}function showMenu() {var dropdownObj = $("#treeName");var dropdownOffset = $("#treeName").offset();$("#treeContainer").css({left: dropdownOffset.left + "px",top: dropdownOffset.top + dropdownObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown);var w = $("#treeName").width();var p = $("#treeName").css("padding-left");$("#treeConfig").css("width",parseInt(w)+parseInt(p)*2);}function hideMenu() {$("#treeContainer").fadeOut("fast");$("body").unbind("mousedown", onBodyDown);}function onBodyDown(event) {if (!(event.target.id == "chooseButton" || event.target.id == "treeName" || event.target.id == "treeContainer" || $(event.target).parents("#treeContainer").length > 0)) { hideMenu();//以下代码暂时没⽤到 startvar height = top.$("#mainFrame").contents().find("body").height();if (height < 850) {height = 850;}top.$("#mainFrame").height(height);//以下代码暂时没⽤到 end}}</script>⽂本框的代码：<input type="text" class="form-control input-sm" id="treeName" onclick="showMenu()"><input type="hidden" name="newsTypeId" id="treeId"/>树状图显⽰的地⽅：<div id="treeContainer" class="treeContainer"><ul id="treeConfig" class="ztree"></ul></div>必要的样式：.treeContainer{display:none;position: absolute;}以下是详解：数据填充数据填充重点就在于zNodes的配置。

ztree的用法

ZTree 是一种基于 jQuery 的树形结构插件，主要用于构建和管理复杂的树形结构数据。

使用 ZTree，首先需要引入相关的 JS 文件和 CSS 文件，然后准备 JSON 格式的树形数据。

在 HTML 中，需要指定一个用于显示树形结构的容器元素，并为其指定一个特定的 ID。

创建 ZTree 的基本步骤如下：
1.引入 ZTree 的 JS 文件和 CSS 文件。

2.准备 JSON 格式的树形数据。

3.在 HTML 中指定一个用于显示树形结构的容器元素，并为其指定一个特定的
ID。

4.使用 jQuery 的$.fn.zTree方法初始化 ZTree。

5.根据需要，可以通过调用 ZTree 的 API 方法来操作树形结构，例如添加节
点、删除节点、展开节点等。

ZTree 提供了一些常用的配置选项，例如check、callback、data等，用于控制树形结构的显示和行为。

同时，ZTree 还支持自定义事件和方法，方便用户根据实际需求进行扩展和定制。

总之，ZTree 是一个功能强大、易于使用和高度可定制的树形结构插件，可以帮助用户快速构建和管理复杂的树形结构数据。

Ztree使用方法

Ztree使用方法1.首先在页面上有<ul/>标签<ul id="tree"class="ztree"></ul>2.定义ztree的配置参数var setting = {view : {selectedMulti : false},data : {key : {title : "valuesName",name : "valuesName"},simpleData : {enable : true,idKey : "dataValues",pIdKey : "parentId"}},check : {enable : false},callback : {onClick : onClick}};以上是常用配置,具体参见ztree api 的setting部分3.获得ztree所要绑定的数据,可以使固定数据也可以使ajax获取的数据a)Ztree的数据有两种格式,标准格式如下:o标准的JSON 数据需要嵌套表示节点的父子包含关系例如：var nodes = [{name: "父节点1",open:true, children: [{name: "子节点1"},{name: "子节点2"}]}];b)简单数据格式如下(推荐使用):o简单模式的JSON 数据需要使用id / pId 表示节点的父子包含关系，如使用其他属性设置父子关联关系请参考setting.data.simple 内各项说明例如：var nodes = [{id:1, pId:0, name: "父节点1"},{id:11, pId:1, name: "子节点1"},{id:12, pId:1, name: "子节点2"}];简单数据的id,pId,name,title都可以在setting的data中进行配置,指定相应的字段在setting的data中配置simpleData为enable:true即表示使用简单数据格式,不配置或配置为false则为标准数据格式.var setting = {data: {simpleData: {enable: true}}};4.初始化ztree生成树$.fn.zTree.init($("#tree"), setting, nodes);第一个参数是<ul/>id选择的jquery对象,第二个参数是配置的setting,第三个参数是获取到的数据.例子:HTML中<ul id="tree"class="ztree"></ul>Js中var setting = {view : {selectedMulti : false},data : {key : {title : "valuesName",name : "valuesName"},simpleData : {enable : true,idKey : "dataValues",pIdKey : "parentId"}},check : {enable : false},callback : {onClick : onClick}};function onClick(event, treeId, treeNode, clickFlag) {alert("treeId:" + treeId + " name:" + + " level:"+ treeNode.level + " tid:" + treeNode.tId + " parentTId:"+ treeNode.parentTId + " children:" + treeNode.children); }$(function() {$.fn.zTree.init($("#tree"), setting, $.parseJSON(tdata)); }5.zTreeObj树对象zTreeObj是树的对象,获取到zTreeObj对象后就可以使用ztree的N多方法来操作树,获取方式:var treeObj = $.fn.zTree.getZTreeObj("tree"); //参数为树的id具体方法都有哪些参见api的zTreeObj部分常用方法介绍:a)zTreeObj.getNodeByParam(key, value, parentNode)根据节点数据的属性搜索，获取条件完全匹配的节点数据JSON 对象Key String需要精确匹配的属性名称需要精确匹配的属性值，可以是任何类型，只要保证与key 指定的属性值保持一致即可搜索范围，指定在某个父节点下的子节点中进行搜索忽略此参数，表示在全部节点中搜索匹配精确搜索的节点数据1、如无结果，返回null2、如有多个节点满足查询条件，只返回第一个匹配到的节点var treeObj = $.fn.zTree.getZTreeObj("tree");var node = treeObj.getNodeByParam("id", 1, null);b)zTreeObj.getNodes()获取zTree 的全部节点数据返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getNodes();c)zTreeObj.getSelectedNodes()获取zTree 当前被选中的节点数据集合返回值Array(JSON)var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();d)zTreeObj.expandAll(flag) 展开/ 折叠全部节点flag Boolean true表示展开,false表示折叠返回值Boolean返回值表示最终实际操作情况true 表示展开全部节点false 表示折叠全部节点null 表示不存在任何父节点var treeObj = $.fn.zTree.getZTreeObj("tree");treeObj.expandAll(true);e)zTreeObj.expandNode(treeNode, expandFlag, sonSign, focus, callbackFlag) 展开/ 折叠指定的节点treeNodeJSON需要展开/ 折叠的节点数据请务必保证此节点数据对象是zTree 内部的数据对象expandFlagBooleanexpandFlag = true 表示展开节点expandFlag = false 表示折叠节点省略此参数，则根据对此节点的展开状态进行toggle 切换sonSignBooleansonSign = true 表示全部子孙节点进行与expandFlag 相同的操作sonSign = false 表示只影响此节点，对于其子孙节点无任何影响sonSign = false 且treeNode.open = expandFlag 时，不会触发回调函数，直接返回省略此参数，等同于falsefocusBooleanfocus = true 表示展开/ 折叠操作后，通过设置焦点保证此焦点进入可视区域内focus = false 表示展开/ 折叠操作后，不设置任何焦点省略此参数，等同于truecallbackFlagBooleancallbackFlag = true 表示执行此方法时触发beforeExpand / onExpand 或beforeCollapse / onCollapse 事件回调函数callbackFlag = false 表示执行此方法时不触发事件回调函数省略此参数，等同于false返回值Boolean返回值表示最终实际操作情况true 表示展开节点false 表示折叠节点null 表示不是父节点var treeObj = $.fn.zTree.getZTreeObj("tree");var nodes = treeObj.getSelectedNodes();if (nodes.length>0) {treeObj.expandNode(nodes[0], true, true, true);}6.treeNode 树节点对象每一个treeNode对象都有N多属性和方法,具体参见api 的treeNode部分常用示例:a)treeNode.isParent 判断节点是否是父节点b) 节点名称c)treeNode.children获取节点的子节点数据集合d)treeNode.getParentNode获取父节点e)treeNode.level 获取节点的层级,根节点的level为0f)treeNode.tId生成的树的节点的html id,区别于主键idg)treeNode.parentTId获取的父节点的tIdh)绑定到树上的其他字段可以通过treeNode对象直接获取,如:treeNode.phone。

ztree的用法

ztree的用法
（最新版）
目录
1.ztree 的概述
2.ztree 的基本用法
3.ztree 的高级用法
4.ztree 的注意事项
正文
【1.ztree 的概述】
ztree 是一款基于 Python 的文件系统浏览器，可以帮助用户快速查看文件系统的树状结构。

它使用起来非常简单，而且功能强大，可以让用户方便地查看文件的详细信息，如大小、创建时间等。

【2.ztree 的基本用法】
要使用 ztree，首先需要安装它，安装命令为：`pip install ztree`。

安装完成后，只需要在终端中输入`ztree`，就可以打开 ztree 的界面。

在 ztree 的界面中，用户可以通过键盘上下左右箭头来选择要查看的目录，然后按空格键来展开或折叠该目录。

如果按下`o`键，则会打开当前选中目录。

【3.ztree 的高级用法】
除了基本的浏览功能外，ztree 还提供了一些高级功能。

例如，用户可以通过`cd`命令切换到其他目录，或者通过`ln`命令创建硬链接。

此外，用户还可以使用`rm`命令删除文件或目录。

【4.ztree 的注意事项】
在使用 ztree 时，需要注意以下几点：
- ztree 只能查看文件系统的树状结构，不能进行文件操作。

如果需要进行文件操作，需要使用其他工具，如`ls`、`cp`等。

- 在使用 ztree 时，不要关闭终端，否则会导致 ztree 崩溃。

如果需要关闭终端，可以先杀死 ztree 进程，然后再关闭终端。

- 在查看大型文件系统时，ztree 可能会卡顿，这是因为它需要读取大量的数据。

实验操作平台Ztree使用介绍

Active Screen & Waiting Screen 添加 box:
1. 先在某个stage中选定“Active Screen” 2. 点击“Treatment” menu “New Box” “Standard Box”
Item
Item:
input item output item
共品投资中所得到的回报。此时被试 i 所获的物质效用可用公式表达为：
n
n
n
n

1 i

y

gi

a
g j ，而该轮中群体的总收益为

1 i

g j na
g j 。其中系数
j 1
i 1
j 1
j 1
a 被定义为MPCR（Marginal Per Capita Return）即边际个体回报，这里设定 0 a 1 na ，
Ztree只要事先的程序编写没有问题，在实际的运行过程中极少发生错误
Ztree会自动实现一些重要数据变量比如profit的运算
用Ztree进行实验设计比较容易上手
背后程序展示1 背后程序展示2
Increased participation
Ztree编程的难易程度
Z-tree官网: “A public good experiment, for instance, can be
正版软件Ztree的好处
在国内很多人用盗版Ztree软件（比如从人大经济论坛下载）是一个客观事实
使用正版软件Ztree可以免费加入Ztree的Mailing list系统，从而可以获得像ESA那样的服务，只要Ztree的任何问题均可以在此发问并获得全球使用Ztree人员的解答和帮助。