ztree 异步加载 节点点击事件无触发 只有第一次刷新的时候才加载！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ztree 异步加载 节点点击事件无触发 只有第一次刷新的时候才加载！相关的知识，希望对你有一定的参考价值。
代码：
var setting =
async:
enable: true,
url: "BDSys_List.ashx?&action=userTree",
asyncParam: ["id", "pId", "name"], //异步调用时传到后台的参数
otherParam: "otherParam": "zTreeAsyncTest" ,
dataFilter: filter
;
function filter(treeId, parentNode, childNodes)
for (var i = 0; i < childNodes.Rows.length; i++)
childNodes.Rows[0]['open'] = true;
childNodes.Rows[i]['id'] = i;
childNodes.Rows[i]['pId'] = 0;
childNodes.Rows[i]['name'] = childNodes.Rows[i]['DeviceID'];
return childNodes.Rows;
var zTree, HoldID;
$(function ()
seadMsg_add.attr("disabled", true);
$("#layout").ligerLayout( leftWidth: 180, topHeight: '95%', width: '95%', space: 2 );
$.fn.zTree.init($("#userTree"), setting);
ztree点击父节点为啥又重新请求一下了
参考技术A jquery ztree 当前父节点下增加子节点问题_点击事件增加子节点一、功能描述：利用jQuery ztree3.1版本插件做导航树形菜单时，页面打开先加载二级菜单，通过点击事件，异步加载的方式，在添加当前父节点的子节点。
二、初始步骤：
1.按照文档要求，导入jquery包，ztree插件包3.1版本；
2.编写相应的jsp页面代码
三、遇到问题：
1、通过chrome调试的时候，提示：addNodes不是当前jquery对象treeObj的方法。但是在api文档里确实存在这个方法。
2、经过很长时间的摸索，开始把ztree-core.js插件换成高版本的，结果addNodes好用了，但是没有了菜单的图标，而且所有的都是异步加载。
四、解决问题：
原因：最后在3.2版本更新日志中，发现这么一句话：
* 【修改】代码结构，将 addNodes、removeNode、removeChildNodes 方法 和 beforeRemove、onRemove 回调 转移到 core 内。
最终领悟，原来3.2版本之前的addNodes。。。等一些方法在ztree.exedit.js中，而且在3.1文档中，方法前也有E字母标识。
所以只要引入jquery.ztree.exedit-3.1.js 包，即可解决这个问题。
五、总结
粗心浪费了好多时间，注意API中的小细节。
这是jqueryztree 各个版本的URL：http://code.google.com/p/jquerytree/downloads/list，供大家参考。
六、jsp代码，只需要加入jquery.ztree.exedit-3.1.js ，url换了即可。
%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>机构维护</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../zTreeStyle/zTreeStyle.css" type="text/css"/>
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../jquery.ztree.core-3.1.js"></script>
<script type="text/javascript"
</head>
<body>
<div>
<ul id="orgTree" class="ztree" style="width:230px; overflow:auto;"></ul>
</div>
<script type="text/javascript">
//配置setting
var ztreeObj,
setting =
async:
enable: true,//开启异步加载模式
contentType: "application/json", //Ajax 提交参数的数据类型。
type: "post",
dataType: "text",//Ajax 获取的数据类型
"url" : "$pageContext.request.contextPath/org/makeOrgTree.action",
//自动提交当前节点的id
//假设 异步加载 父节点(node = id:1, name:"test") 的子节点时，将提交参数 id=1
autoParam: ["id"]
,
//Ajax 返回的数据格式中，页面主要参数的设置
data:
simpleData:
enable: true,
idKey: "id",
pIdKey: "pid",
rootPid: "0"
,
//树形图动作
view:
expandSpeed: "fast", //节点展开的速度
selectedMulti: false //设置是否允许同时选中多个节点。
,
//回调函数的设置
callback:
onClick: zTreeOnClick //点击事件，当点击节点，做的事情。
;
/**
* 初始化树形菜单
*/
$(function()
ztreeObj = $.fn.zTree.init($("#orgTree"),setting);
);
//点击事件的处理
function zTreeOnClick(event,treeId,treeNode)
pid =treeNode.id;
var data = "org.id":pid;
$.ajax(
url:"$pageContext.request.contextPath/org/makeOrgTreeAgain.action",
type: "post",
dataType: "json",
data: data,
cache: false,
success: function(jsonArray)
var treeObj = $.fn.zTree.getZTreeObj("orgTree");
treeObj.addNodes(treeNode,jsonArray);
);
</body>
</html>
以上是关于ztree 异步加载 节点点击事件无触发 只有第一次刷新的时候才加载！的主要内容，如果未能解决你的问题，请参考以下文章