jquery zTree树形菜单的使用 博客分类： jquery jQueryAjax数据结构HTML
程序员文章站
2024-03-04 18:29:06
...
<%@ 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.
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.