zTree异步加载自动展开

最近在处理一个树形菜单,要做到异步加载、自动展开。可怎么搞都不行,要点击一下才能展开所有。

使用的zTree版本是v3.5.18。其实还是蛮简单的。话不多说,代码如下:

/**
 * 初始化菜单
 */
var initTree = function(treeId) {
    var settings = {
            treeId: treeId,
            async: {
                enable: true,
                type: ‘post‘,
                dataType: ‘json‘,
                url: ‘menu/getMenusByParentId‘,
                // 查询子菜单参数,传父节点id、以及父节点是否为叶子。叶子节点将不再查询,提高性能
                autoParam: ["id=parent_id", "is_leaf"], 
                dataFilter: function(treeId, parentNode, responseData) {
                    if(responseData) {
                        for(var i = 0, length = responseData.length; i < length; i++) {
                            var node = responseData[i];
                            if(node.is_leaf == 0) {//节点的isParent=true,才会异步加载子节点
                                node.isParent = true;
                            }
                        }
                    }
                    
                    return responseData;
                }
            },
            callback: {                    
                onAsyncSuccess: function(event, treeId, treeNode, msg){// 此回调函数可逐级异步展开子节点
                    if(treeNode.isParent == true && treeNode.children && treeNode.children.length > 0) {
                        var children = treeNode.children;                        
                        for(var i = 0, length = children.length; i < length; i++) {
                            refreshTree(children[i]);
                        }
                        this.expandNode(treeNode, true);
                    }
                }
            }
    };
    
    var rootNode = {name:"菜单", murl:‘‘, isParent: true, open:false, id: 0, is_leaf: 0};
    var zTreeObj = $.fn.zTree.init($("#"+treeId), settings, rootNode);
    // 异步加载树.这里要注意:直接传rootNode异步刷新树,将无法展开rootNode。要通过如下方式获取根节点。false参数展开本节点
    zTreeObj.reAsyncChildNodes(zTreeObj.getNodes()[0], "refresh", false);        
};
时间: 2024-10-21 18:36:28

zTree异步加载自动展开的相关文章

Ztree异步加载自动展开节点

在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况下展开,在异步加载之前,当前节点是没有子节点的,所以无法打开.异步加载自动展开解决方法如下: 1.设置ztree的加载完成的回调函数: setting = {      ......                  callback: {        ......        onAsyncS

ztree异步加载

Ztree异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 直接贴代码(SpringMvc+Mybatis): 前台页面ztreeList.jsp: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); Stri

ZTree异步加载树结构

var setting = { async:{ autoParam:["parentId"], enable:true, type:"post", url:getUrl, dataFilter:filter, }, check : { chkStyle: "radio", enable: false, chkboxType : { "Y" : "s", "N" : "ps&qu

Jquery树控件ZTree异步加载

转载请注明出处:jiq?钦's technical Blog 异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { async: { enable: true, url:"InitServiceIpsData.action", autoParam:["id", "name"], dataFilter:

JQuery ztree 异步加载实践

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说这篇博客还算规整! 准备工作 1 JQuery ZTree,下载地址 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象,下载地址 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-

关于ztree异步加载的问题(二)

本来以为这个异步加载会很难控制,因为考虑到ztree节点图标的控制,结果并不是那么困难,ztree自己控制图标,你只要在json中设置isParent:true,它自己会识别父节点并控制图标,以下是核心代码: <!--前台js代码以及html--> //参数设置 var setting={ async: { enable: true, url:"${pageContext.request.contextPath}/page/department_ascyDepartment.do&q

zTree异步加载展开第一级节点

在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true;function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLis

asp.net zTree 异步加载

第一次写文章,关于这两天做的关于zTree插件的一些内容,不足之处希望各位见谅: http://www.ztree.me/v3/main.php#_zTreeInfo    zTree官网地址 zTree插件还是很强大的,操作灵活,界面也漂亮,做web的应该都了解的 代码附上 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&

bootstrap jQuery Ztree异步加载数据,check选择&amp;可添加、修改、删除节点

效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <script src="../Scripts/zTree/js/jquery-1.4.4.min.js"></script> <script src