一、功能描述:利用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>