ztree节点树 -- 节点路径拼接

点击获取节点所在的路径,并且显示出来。
在使用ztree树形插件做出来树形分类,在使用中点击某节点时需要显示其路径,以直观的显示出来。
直接动手,有两个方法需要一起使用。
//分类节点路径导航:(两个方法)一起用 (方法一在节点树的点击事件中调用)
//节点路径:(两个方法)一起用
var curLocation = “”;//记录节点当前位置
//方法一
function Classification() {
var treeObj = $.fn.zTree.getZTreeObj(“treeDemo”);//获取树形
//获取当前被选中的节点数据集合(父节点)
var nodes = treeObj.getSelectedNodes();
//判断节点的长度
if (nodes.length > 0) {
var allNode = nodes[0][‘name’];
//获取所选节点长度范围内的各级父节点
var node = nodes[0].getParentNode();
//方法二的调用和传参
getParentNodes(node, allNode);
selctvfdpm();//点击查询
}

        var location = "";//定义用于接收拼接路劲的变量
        var nodeArrs = curLocation.split(" > ");//定义拼接的间隔符
        //用for循环遍历
        for (var i = nodeArrs.length - 1; i >= 0; i--) {
            location += nodeArrs[i] + " > "
        }
        //拼接路劲的接收
        location = location.substring(0, location.lastIndexOf(" > "));

        //赋值
        $("#ztreename").text(location);
     
    }

    //方法二
    function getParentNodes(node, allNode) {
        if (node != null) {
            //各级节点name值的拼接
            allNode += " > " + node['name'];
            //getParentNode()获取该节点的父节点
            curNode = node.getParentNode();
            //只要节点有父节点,就循环调用方法
            getParentNodes(curNode, allNode);
        }
        else {
            //没有父节点,则为根节点
            curLocation = allNode;
        }
    }

得到的结果:
在这里插入图片描述
点击:B2C
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值