<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树</title>
<link rel="stylesheet" href="$link.getContextURL()/manager/css/main.css" type="text/css" />
<link href="$link.getContextURL()/manager/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="$link.getContextURL()/common/css/right.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree-3.2.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.excheck-3.1.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.exedit-3.1.js"></script>
<script>
var setting = {
view: {
selectedMulti: false
},
async: {
enable: true,
url:"catalog1",
autoParam:["id"]
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "managerid"
}
} ,
view: {
expandSpeed: ""
},
callback: {
onAsyncSuccess: onAsyncSuccess,
onClick : onClick ,
onAsyncError: onAsyncError,
onRightClick: OnRightClick
}
};
<!-- 获取所有根节点的name,添加到一个数组中。每触发一次该函数就移除一个值-->
var fag = false;var array = new Array();
function onClick(event, treeId, node) {
var treeObj = $.fn.zTree.getZTreeObj("tree")
var nodes = treeObj.getNodes();
if(fag == false){
for(var m = 0 ; m < nodes.length;m++){
array[m]=nodes[m].name;
}
fag = true;
}
for(var h = 0 ; h < array.length; h++ ){
if(array[h]==node.name){
$.ajax({
type: "GET",
async: false,
url: "$link.getContextURL()/managerTest/listChildNodes3?managerID="+node.id,
data:"",
success:function(data){
zNodes=new Array(data.length);
for(var i=0;i<data.length;i++){
zNodes[i]={ id:data[i].memberid, pId:node.id, name:data[i].membername};
}
var newNode = treeObj.addNodes(node, zNodes);
var a= array.splice(h,1);
window.top.$.XYTipsWindow.removeBox();
}
});
}
}
}
function OnRightClick(event, treeId, treeNode) {
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
}
}
function showRMenu(type, x, y) {
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
function onAsyncSuccess(event, treeId, treeNode, msg) { }
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("异步获取数据出现异常。");
}
//添加组织
function addTreeNode() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/addManager?managerId="+node.id+"&levels="+node.level+"&random="+Math.random();
}
//添加人员
function resetTree() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/addMember?managerId="+node.id+"&random="+Math.random();
}
//修改组织
function update() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/updateManager?id="+node.id+"&random="+Math.random();
}
//删除组织
function remove() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.jConfirm('您确认要删除"'+node.name+'"这个分类吗?', '确认对话框', function(result) {
if(result)
{
if(node.children==undefined || node.children.length==0)
{
$.get('deleteSystemOrganization', {
id:node.id
}, function(data, status) {
//结果为success, error等等,但这里是成功时才能运行的函数
if(data.result)
{
zTree.removeNode(node);
parent.jAlert(data.message, '确认对话框');
}
});
}
else
{
parent.jAlert('要删除的"'+node.name+'"分类有子节点,请先删除子节点', '确认对话框');
}
}
});
}
//刷新树(1.重新加载,从头开始 2.刷新被选中的节点的根节点)
function refresh(){
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(null, "refresh");
}
function refreshNode(node){
}
var zTree, rMenu;
$(document).ready(function(){
$.fn.zTree.init($("#tree"), setting,null);
zTree = $.fn.zTree.getZTreeObj("tree");
rMenu = $("#rMenu");
});
/**
* 接收一个json对象,将它添加到ztree中
* @param {} data
*/
function leftFunction(data) {
//添加树节点方法
alert(data);
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node=treeObj.getSelectedNodes()[0];
var newNode = data;
newNode = treeObj.addNodes(node, newNode);
window.top.$.XYTipsWindow.removeBox();
} $(function(){
$.ajax({
type: "GET",
url: "$link.getContextURL()/managerTest/listManager4",
data:"",
success:function(data){
zNodes=new Array(data.length);
for(var i=0;i<data.length;i++){
zNodes[i]={ id:data[i].managerid, pId:0, name:data[i].managername};
}
$.fn.zTree.init($("#tree"), setting, zNodes);
}
});
});
//-->
</script>
</head>
<body>
<div class="accordion" style="margin: 0px;">
<h1 class="caption on">
<a href="javascript:void(0);">组织管理</a>
</h1>
<div class="content on">
<div id="managerList" >${managerList}
</div>
<div><ul id="tree" class="ztree"></ul></div>
<div id="rMenu" style="position:absolute; visibility:hidden">
<ul>
<li id="m_add" onclick="resetTree();">增加人员</li>
<li id="m_add" onclick="addTreeNode();">增加组织</li>
<li id="m_update" onclick="update();">编辑组织</li>
<li id="m_remove" onclick="remove();">删除组织</li>
<li id="m_refresh" onclick="refresh();">重新加载树</li>
<li id="m_refreshNode" onclick="refreshNode();">刷新树选定的根节点</li>
</ul>
</div>
</div>
</div></body>
怎么也刷新不了树。使用ajax异步读取节点数据json,怎么刷新树呢?求大神帮帮忙ztree ajax json
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树</title>
<link rel="stylesheet" href="$link.getContextURL()/manager/css/main.css" type="text/css" />
<link href="$link.getContextURL()/manager/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="$link.getContextURL()/common/css/right.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree-3.2.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.core-3.1.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.excheck-3.1.js"></script>
<script type="text/javascript" src="$link.getContextURL()/common/script/jquery.ztree.exedit-3.1.js"></script>
<script>
var setting = {
view: {
selectedMulti: false
},
async: {
enable: true,
url:"catalog1",
autoParam:["id"]
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "managerid"
}
} ,
view: {
expandSpeed: ""
},
callback: {
onAsyncSuccess: onAsyncSuccess,
onClick : onClick ,
onAsyncError: onAsyncError,
onRightClick: OnRightClick
}
};
<!-- 获取所有根节点的name,添加到一个数组中。每触发一次该函数就移除一个值-->
var fag = false;var array = new Array();
function onClick(event, treeId, node) {
var treeObj = $.fn.zTree.getZTreeObj("tree")
var nodes = treeObj.getNodes();
if(fag == false){
for(var m = 0 ; m < nodes.length;m++){
array[m]=nodes[m].name;
}
fag = true;
}
for(var h = 0 ; h < array.length; h++ ){
if(array[h]==node.name){
$.ajax({
type: "GET",
async: false,
url: "$link.getContextURL()/managerTest/listChildNodes3?managerID="+node.id,
data:"",
success:function(data){
zNodes=new Array(data.length);
for(var i=0;i<data.length;i++){
zNodes[i]={ id:data[i].memberid, pId:node.id, name:data[i].membername};
}
var newNode = treeObj.addNodes(node, zNodes);
var a= array.splice(h,1);
window.top.$.XYTipsWindow.removeBox();
}
});
}
}
}
function OnRightClick(event, treeId, treeNode) {
if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
}
}
function showRMenu(type, x, y) {
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
$("body").bind("mousedown", onBodyMouseDown);
}
function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
function onAsyncSuccess(event, treeId, treeNode, msg) { }
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
alert("异步获取数据出现异常。");
}
//添加组织
function addTreeNode() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/addManager?managerId="+node.id+"&levels="+node.level+"&random="+Math.random();
}
//添加人员
function resetTree() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/addMember?managerId="+node.id+"&random="+Math.random();
}
//修改组织
function update() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.document.getElementById("right").src="managerTest/updateManager?id="+node.id+"&random="+Math.random();
}
//删除组织
function remove() {
hideRMenu();
var node=zTree.getSelectedNodes()[0];
parent.jConfirm('您确认要删除"'+node.name+'"这个分类吗?', '确认对话框', function(result) {
if(result)
{
if(node.children==undefined || node.children.length==0)
{
$.get('deleteSystemOrganization', {
id:node.id
}, function(data, status) {
//结果为success, error等等,但这里是成功时才能运行的函数
if(data.result)
{
zTree.removeNode(node);
parent.jAlert(data.message, '确认对话框');
}
});
}
else
{
parent.jAlert('要删除的"'+node.name+'"分类有子节点,请先删除子节点', '确认对话框');
}
}
});
}
//刷新树(1.重新加载,从头开始 2.刷新被选中的节点的根节点)
function refresh(){
var treeObj = $.fn.zTree.getZTreeObj("tree");
treeObj.reAsyncChildNodes(null, "refresh");
}
function refreshNode(node){
}
var zTree, rMenu;
$(document).ready(function(){
$.fn.zTree.init($("#tree"), setting,null);
zTree = $.fn.zTree.getZTreeObj("tree");
rMenu = $("#rMenu");
});
/**
* 接收一个json对象,将它添加到ztree中
* @param {} data
*/
function leftFunction(data) {
//添加树节点方法
alert(data);
var treeObj = $.fn.zTree.getZTreeObj("tree");
var node=treeObj.getSelectedNodes()[0];
var newNode = data;
newNode = treeObj.addNodes(node, newNode);
window.top.$.XYTipsWindow.removeBox();
} $(function(){
$.ajax({
type: "GET",
url: "$link.getContextURL()/managerTest/listManager4",
data:"",
success:function(data){
zNodes=new Array(data.length);
for(var i=0;i<data.length;i++){
zNodes[i]={ id:data[i].managerid, pId:0, name:data[i].managername};
}
$.fn.zTree.init($("#tree"), setting, zNodes);
}
});
});
//-->
</script>
</head>
<body>
<div class="accordion" style="margin: 0px;">
<h1 class="caption on">
<a href="javascript:void(0);">组织管理</a>
</h1>
<div class="content on">
<div id="managerList" >${managerList}
</div>
<div><ul id="tree" class="ztree"></ul></div>
<div id="rMenu" style="position:absolute; visibility:hidden">
<ul>
<li id="m_add" onclick="resetTree();">增加人员</li>
<li id="m_add" onclick="addTreeNode();">增加组织</li>
<li id="m_update" onclick="update();">编辑组织</li>
<li id="m_remove" onclick="remove();">删除组织</li>
<li id="m_refresh" onclick="refresh();">重新加载树</li>
<li id="m_refreshNode" onclick="refreshNode();">刷新树选定的根节点</li>
</ul>
</div>
</div>
</div></body>
怎么也刷新不了树。使用ajax异步读取节点数据json,怎么刷新树呢?求大神帮帮忙ztree ajax json
http://www.ztree.me/v3/api.php
api里的方法是用setting={}进行设置url等等的,我设置之后,只能跳转到我需要进入的那个后台action,也可以返回json数据,但是怎么加载到ztree里呢?我在body里也显示了一下,可以实现的。怎么在js\jquery获取打到的呢?
async: {
enable: true,
url:"catalog1",
autoParam:["id"]
dataFilter: filter
},
..................
function filter(treeId, parentNode, childNodes) {
$.each(childNodes,function(i,v){ });
return childNodes;
}
//好好了解一下dataFilter