赞
踩
异步加载Tree 想要默认展开全部节点,使用普通的方法是不行的。
例如:
- $(document).ready(function(){
- $.fn.zTree.init($("#areaTree2"), setting3, zNodes3);
- var treeObj = $.fn.zTree.getZTreeObj("areaTree2"); //得到该tree
- var node = treeObj.getNodeByTId("areaTree2_1"); //选中第一个节点
- treeObj.expandNode(node, true, false, true); //打开节点 ,第一个参数表示哪个节点,第二个参数表示展开还是关闭,第三个参数表示 是否打开全部子孙节点
- });
官方demo 中 有一个 异步展开全部节点的 页面 在 \zTree-zTree_v3-2ffc0fa\demo\cn\super\asyncForAll.html 这个页面
但是他给定的方法不一定适合自己 ,所以我做了一些优化,删除了对自己显示数据没用的方法。
- <input type="button" value="为该角色添加功能" οnclick="addFunction()">
- <ul id="areaTree4" class="ztree"></ul>
- </div>
- <script type="text/javascript">
- var setting2 = {
- check: {
- enable: true
- },
- async: { //异步
- enable: true,
- url: getUrl
- },
- data: {//数据
- key: {
- name: "functionName" //name
- },
- simpleData: {
- enable: true,
- idKey: "functionId", //id
- pIdKey: "pid" //pid
- }
- },
- callback: { //回调函数,实现展开功能
- beforeAsync: beforeAsync,
- onAsyncSuccess: onAsyncSuccess,
- onAsyncError: onAsyncError
- }
-
- }
- function getUrl(treeId, treeNode){ //默认注入两个参数,第一个是当前树的名字,第二个是选中的节点
- return "/roleProject/FunctionServlet?dir=getFunctionTree&functionId="+treeNode.functionId+"&roleNo="+key;
- }
-
- function filter(treeId, parentNode, childNodes) {
- if (!childNodes) return null;
- for (var i=0, l=childNodes.length; i<l; i++) {
- childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
- }
- return childNodes;
- }
- function beforeAsync() {
- curAsyncCount++;
- }
-
- function onAsyncSuccess(event, treeId, treeNode, msg) {
- curAsyncCount--;
- if (curStatus == "expand") {
- expandNodes(treeNode.children);
- } else if (curStatus == "async") {
- asyncNodes(treeNode.children);
- }
- if (curAsyncCount <= 0) {
- if (curStatus != "init" && curStatus != "") {
- asyncForAll = true;
- }
- curStatus = "";
- }
- }
- function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
- curAsyncCount--;
- if (curAsyncCount <= 0) {
- curStatus = "";
- if (treeNode!=null) asyncForAll = true;
- }
- }
- var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
- goAsync = false;
- function expandAll() {
-
- var zTree = $.fn.zTree.getZTreeObj("areaTree4");
- if (asyncForAll) {
-
- zTree.expandAll(true);
- } else {
- expandNodes(zTree.getNodes());
- if (!goAsync) {
-
- curStatus = "";
- }
- }
- }
- function expandNodes(nodes) {
- if (!nodes) return;
- curStatus = "expand";
- var zTree = $.fn.zTree.getZTreeObj("areaTree4");
- for (var i=0, l=nodes.length; i<l; i++) {
- zTree.expandNode(nodes[i], true, false, false);
- if (nodes[i].isParent && nodes[i].zAsync) {
- expandNodes(nodes[i].children);
- } else {
- goAsync = true;
- }
- }
- }
-
-
-
- var zNodes2=[{functionId:0,functionName:"功能",pid:-1,isParent:true,checked:true}];
- $(document).ready(function(){
- $.fn.zTree.init($("#areaTree4"), setting2, zNodes2);
- expandAll(); //调用写好的展开全部节点方法
- });
-
-
这段代码 有很高的复用性,只需要传过来的Json对象 正确,使用zTree 完全不需要做改动,即可使用,只要将你自己的属性字段修改就可以了。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。