<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树形结构测试111111111</title>
<link rel="stylesheet" href="JQuery zTree v2.2_1215/demo/demoStyle/demo.css" type="text/css">
<link rel="stylesheet" href="JQuery zTree v2.2_1215/demo/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="JQuery zTree v2.2_1215/jquery-1.4.2.js"></script>
<script type="text/javascript" src="JQuery zTree v2.2_1215/jquery-ztree-2.2.js"></script>
<script type="text/javascript"><!--
var zTree1;
var setting;
setting = {
async: true, //异步加载
editable:true, //设置可编辑状态
edit_renameBtn :true, //出现编辑按钮
edit_removeBtn : true, //删除按钮
asyncUrl:"/sitebao62p/treeTestAction_getNode.do", //获取节点数据的URL地址
asyncParam: ["name","id"], //获取节点数据时，必须的数据名称，例如：id、name
callback:{
rename:zTreeOnRename, //修改节点名称
beforeRemove: zTreeBeforeDel, //删除时提示
remove: zTreeOnRemove, //删除该节点
drop: zTreeOnDrop //拖拽保存
}
};
function zTreeOnDrop(event, treeId, treeNode, targetNode, moveType) { //拖拽保存
if(treeNode!=null){ //拖拽节点的数据是否放在合适的节点上
var id=treeNode.tId.replace(treeId+"_",""); //拖拽节点的id值
var pid=0;
if(targetNode!=null){
pid=targetNode.tId.replace(treeId+"_",""); //获得父类的id值 如果是根节点 pid就是0
}
//保存数据
$.ajax({
url:"/sitebao62p/treeTestAction_updateNode.do",
type:"POST",
dataType:"text",
data:'id='+id+'&pid='+pid+'&option=drop',
success:function(){}
});
}
}
function zTreeBeforeDel(treeId, treeNode) {
if(window.confirm("您确定要删除该目录及其子目录吗?")){
return true;
}
return false;
}
function addTreeNode(){
if(zTree1.getSelectedNode()){ //是否选中节点
var tid=zTree1.getSelectedNode().tId;
var id=tid.replace("treeDemo_",""); //获得选中的id
$.ajax({
url:"/sitebao62p/treeTestAction_addTreeNode.do",
type:"POST",
dataType:"text",
data:'id='+id,
success:function(data){
zTree1.getSelectedNode().isParent=true; //设置当前的节点为父节点
zTree1.reAsyncChildNodes(zTree1.getSelectedNode(),"refresh"); //异步加载该节点
window.setTimeout(function(){
id="treeDemo_"+data+"_a";
$("#"+id+"").click(); //让新增加的节点选中
},1000);
}
});
}
else{ //增加根目录
$.ajax({
url:"/sitebao62p/treeTestAction_addTreeNode.do",
type:"POST",
dataType:"text",
success:function(data){
var temp=[{'id':data,'open':false,'name':'我的文件夹'}];
zTree1.addNodes(null,temp);
var id="treeDemo_"+data+"_a";
$("#"+id+"").click();
}
});
}
}
function zTreeOnRemove(event, treeId, treeNode) {
var id=treeNode.tId.replace(treeId+"_","");
$.ajax({
url:"/sitebao62p/treeTestAction_deleteTreeNode.do",
type:"POST",
dataType:"text",
data:'id='+id,
success:function(data){
}
});
}
function zTreeOnRename(event, treeId, treeNode) {
var id=treeNode.tId.replace(treeId+"_","");
$.ajax({
url:"/sitebao62p/treeTestAction_updateNode.do",
type:"POST",
dataType:"text",
data:'id='+id+'&name='+treeNode.name,
success:function(data){
}
});
}
function zTreeBeforeClick(treeId, treeNode) {
return true;
}
function zTreeOnClick(event, treeId, treeNode) {
}
var zNodes =[];
$(function(){
zTree1 = $("#treeDemo").zTree(setting, zNodes);
});
--></script>
</head>
<body>
<a href='javascript:void(0)' onclick='addTreeNode()'>增加节点</a>
<ul id="treeDemo" class="tree"></ul>
</body>
</html>
------------------
数据结构为:[{id:1,name:'aaa',isParent:true},{id:2,name:'bbbbbbb',isParent:false}];
---------------------------------------
修改了ztree的两处地方:
1)绑定是自己的id值 在ztreejs中的365行 node.tId = setting.treeObjId + "_" + (++zTreeId); 改成自己的id值 请确保没有id值重复
2)同时为了异步增加时刷新ztree 我用的版本是2.2有点bug 请下载最新的版本进行测试后续版本已经去掉了一些bug.
分享到：
java521@163.com
相关推荐
**jQuery zTree 树形菜单详解** jQuery zTree是一款基于jQuery的开源JavaScript库，用于创建交互式的树形菜单。它提供了丰富的配置选项、多种事件处理和灵活的数据接口，使得在网页中构建各种复杂的树结构变得非常...
总的来说，JQuery-zTree是一款强大且易用的树形插件，对于移动端应用来说，其良好的适应性和丰富的功能使得它成为开发树形菜单的理想选择。通过理解和掌握这个项目提供的代码，你将能够快速地在你的移动端项目中集成...
Bootstrap风格的zTree树形菜单代码是一款结合了流行的前端框架Bootstrap和强大的jQuery树形插件zTree的解决方案。zTree是一款轻量级的JavaScript组件，它能够帮助开发者快速构建出功能丰富的树形结构，适用于网站...
《jQuery.zTree：构建高效灵活的树形菜单导航》 在网页开发中，树形菜单是一种常见的用户界面元素，用于组织和展示层次化的数据。jQuery.zTree是一款强大的JavaScript插件，专为创建交互式、多用途的树形菜单而设计...
这个“zTree树形菜单jquery.rar”压缩包提供了一个实际的示例，教你如何利用zTree与MySQL数据库相结合，实现动态生成树形菜单的功能。 首先，让我们深入理解zTree的核心功能。zTree是轻量级的，它可以轻松地集成到...
《Jquery-zTree树形菜单在移动端的实现与应用》 在现代网页开发中，树形菜单作为一种常见的数据展示方式，被广泛应用于导航、层级结构的展现等方面。Jquery-zTree是一款基于jQuery的插件，它能够轻松创建交互式的树...
zTree是一款基于jQuery的插件，专用于实现多级可展开闭合的树形菜单。其简洁的代码结构和直观的操作方式，使得开发者能够快速理解和应用。 1. **zTree基本概念** - **节点（Node）**：zTree中的基本单位，每个节点...
jQuery zTree是一款基于JQuery库的插件，用于构建功能丰富的树形菜单。它具有许多优点，如利用JQuery的核心代码实现，支持多种浏览器，包括IE、Firefox、Chrome、Opera和Safari。zTree的最新版本v3.0对代码进行了...
**zTree：强大的JavaScript树形菜单库** zTree是一款基于JavaScript的开源树形插件，广泛应用于网页中的数据展示和交互操作。它以其轻量级、高性能和丰富的配置选项而受到开发者的青睐。zTree的核心功能是将JSON...
《jQuery ZTree自定义编辑的树形菜单插件详解》 在Web开发中，树形菜单是一种常见的数据展示形式，它能清晰地呈现层级关系，方便用户浏览和操作。jQuery ZTree是一款强大的JavaScript树形菜单插件，尤其适用于构建...
《jQuery ZTree自定义编辑树形菜单插件代码解析与应用》 在Web开发中，树形菜单是一种常见的数据展示方式，它能够清晰地呈现层级关系，方便用户进行导航和操作。jQuery ZTree是一款功能强大的JavaScript插件，专门...
在本项目中，"zTree树形菜单展开收缩插件"是其核心应用，主要特性包括节点的动态展开与收缩，以及支持关键字模糊查询筛选功能。 1. **zTree基本概念** - **树形结构**：zTree展示的数据结构为树状，每一级节点可以...
jQuery zTree是一款基于JavaScript的开源树形插件，广泛应用于网站的导航、目录展示、数据组织等场景。它以其强大的功能、灵活的配置和友好的API，深受开发者的喜爱。在本篇文章中，我们将深入探讨jQuery zTree的...
"JQ ztree树形菜单筛选插件"正是这样一款专为提升网页操作便捷性而设计的工具，它结合了jQuery、CSS特效和网页特效技术，为开发者提供了丰富的功能和高度可定制性，让网站的导航菜单更加生动且易于操作。 一、...
3. **初始化树**：使用jQuery选择器定位到树形菜单容器，并调用`zTree`的初始化方法，传入配置参数和数据。 4. **事件绑定**：根据需求绑定节点的点击、展开等事件，实现业务逻辑。 5. **动态操作**：通过API进行...
总的来说，jQuery ztree是一个强大且灵活的树形菜单插件，通过其丰富的配置选项和API，可以满足各种复杂的需求。无论是构建文件管理系统、组织结构图，还是构建具有层级关系的导航菜单，它都是一个很好的选择。通过...
**JQ.zTree树形菜单** 是一个基于jQuery的优秀扩展插件，它主要用于构建功能丰富的树形结构，尤其适用于网站导航、数据管理、组织结构展示等场景。zTree不仅设计简洁，而且易于使用，提供了丰富的配置选项和事件处理...
在本例中，"zTree树形菜单代码.7z" 是一个压缩包文件，其中包含了用于实现bootstrap风格的zTree树形菜单的相关资源和代码。 首先，让我们详细了解一下zTree。zTree是一个基于jQuery的开源项目，它提供了一种简单的...
**Bootstrap风格的zTree树形菜单代码详解** 在网页设计中，树形菜单是一种常见的交互元素，用于组织和展示层次化的数据。zTree是一款优秀的JavaScript实现的树形插件，它具有丰富的功能和良好的可定制性。当zTree与...