美文网首页zTree让前端飞
zTree控制数据展示

zTree控制数据展示

作者: 冷态度0817 | 来源:发表于2019-10-15 21:12 被阅读0次

一、zTree展示到指定层级的数据

1.在项目开发过程中,组织结构树只想展示到第三级的数据,数据源的数据结构无数据层级信息,无奈只能从前端下手。
解决思路:zTree渲染数据后每个节点有层级level,只要遍历每个节点,把不要的层级数据剔除掉即可。
2.代码如下:

/**
** zTreeObj,zTree对象
** treeLvl,展示到treeLvl+1级的数据
**/
funtion showTreeDataByLvl(zTreeObj, treeLvl) {
    //获取zTree所有节点
    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i] == treeLvl) {
            //移除指定层级的所有子节点
            zTreeObj.removeChildNodes(nodes[i]);
        }
    }
}

二、zTree展开到指定层级的数据

1.项目开发过程中,菜单树有多个层级,想要指定展开到某一级节点。
2.代码如下:

/**
** isRoot,是否是根节点
** zTreeObj,zTree对象
** childNodes,遍及节点
** treeLvl,zTree展开到treeLvl+2级的数据
**/
function showTreeMenuNum(isRoot, zTreeObj, childNodes, treeLvl) {
    if (isRoot) {
        var rootNodes = zTreeObj.getNodes();
        showTreeMenuNum(false, zTreeObj, rootNodes, treeLvl);
    } else {
        if (!isEmpty(childNodes) && !isEmpty((len = childNodes.length)) && len > 0) {
        if(treeLvl < childNodes[0].level) {
            return;
        }
        for (var i = 0; i < len; i++) {
            zTreeObj.expand(childNodes[i], true, false, false, true);
            var child = childNodes[i].children;
            showTreeMenuNum(false, zTreeObj, child , treeLvl);
        }
        }
    }
}

/**
** 判断给定的对象obj是否为空
**/
function isEmpty(obj) {
    try {
        return typeof(obj) == 'undefined' || null = obj || obj.replace(/\s/g, '') == '';
    } catch (e) {
        return false;
    }
}

3.异步加载数据使用如下:

callback : {
    /*树异步加载成功后操作*/
    onAsyncSuccess :function() {
        //zTreeObj.expandAll(true);
        showTreeMenuNum(true, zTreeObj, zTreeObj, 3);
    }
}

相关文章

网友评论

    本文标题:zTree控制数据展示

    本文链接:https://www.haomeiwen.com/subject/wvgjmctx.html