<%@ 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树形菜单代码并适应移动端，可以自动配置图标
NULL 博文链接：https://gaojunwei.iteye.com/blog/1770615
bootstrap风格的zTree树形菜单代码 一款支持自定义编辑，添加列表，删除列表等功能的bootstrap风格的zTree树形菜单代码，jQuery树形结构菜单插件下载。
强大的jquery.ztree树形菜单插件支持多种树形菜单导航
zTree树形菜单展开收缩插件。一款简单的zTree树形菜单展开收缩插件，可以在输入框输入关键字进行模糊查询筛选。
Jquery-ztree树形菜单代码并适应移动端
jquery ztree自定义编辑的树形菜单插件代码
本项目通过ztree插件，后台连接mysql数据库实现动态树形菜单。只需要更改后台数据表即可快速生成一个树形菜单。
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容，在一个页面内可同时生成多个Tree 实例，支持一次性静态生成和Ajax 异步加载两种方式，...
jquery ztree自定义编辑的树形菜单插件----------------------------------------------------------
基于jQuery制作的ztree多层文件夹树形结构菜单插件，支持点击收缩展开子菜单和关键词搜索筛选功能。
在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号 第一步：在页面显示菜单位置，添加 ul设置 class...ztree树形菜单的使用</title> <!-- 导入jquery核心类库 --> [removed][removed]
一个简单的树形结构的，能满足各种需求，可以操作节点的增删，节点图标的变换，需要引入jQuery。里面有demo可api
打开jquery\demo\cn\index.html 1.可显示连线、不连线或自定义图标 2.可以实现有复/单选框功能 3.可以实现能够拖拽的节点（用zTree移动复制节点） 等等.... 基本上平常使用到的树形菜单功能都有demo
主要介绍了jQuery使用zTree插件实现树形菜单和异步加载的相关方法，感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了jQuery zTree加载树形菜单功能，轻松设计树形结构菜单功能，感兴趣的小伙伴们可以参考一下
JQ ztree树形菜单筛选插件是一款基于jQuery制作的多层文件夹树形结构，点击收缩展开文件菜单名，支持关键词搜索筛选菜单功能。
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
非常实用好看的特效代码，可以完美运行，可以二次修改！