zTree简单数据模式下addDiyDom自定义结点控件

最新推荐文章于 2021-02-26 16:56:05 发布

原创最新推荐文章于 2021-02-26 16:56:05 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#zTree #addDiyDom

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在zTree中自定义树节点控件，包括构建树节点页面、设置节点样式、添加自定义DOM元素、获取节点数组及初始化树结构。适用于需要扩展树形控件功能的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用场景：针对普通的树形结构不能满足的时候，可以自定义树节点控件。

一、构建树节点页面

<ul id="regionZTree" class="ztree table_ztree" style="width:100%;height:700px;overflow-y:auto;margin-top: 10px;"></ul>

二、树节点setting设置

var menu_setting = {
    check: {
        enable: false
    },
    view: {
        dblClickExpand: false,
        addDiyDom: addDiyDom
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
        }
    },
    callback: {
        onClick: zTreeOnClick
    }
};

三、自定义控件addDiyDom

这里解释一下原理，zTree通过addDiyDom去构建这个树的时候，每个树节点都会走一遍这个函数，因此我们可以在这个函数中替换、新增相应的zTree元素，达到我们的需求。比如如下，每个li元素下都是这样，我们可以构造我们自己的div，放入我们希望的元素，进而达到目的。

<a id="sea_treeDemo_4_a" class="level1" treenode_a="" onclick="" target="_blank" style="" title="2.1 基金基本情况"><span id="sea_treeDemo_4_ico" title="" treenode_ico="" class="button ico_open" style=""></span><span id="sea_treeDemo_4_span" class="node_name">内容xxxx</span></a>

function addDiyDom(treeId, treeNode) {
    var spaceWidth = 15;
    //获取每个li的结点下的a标签
    var aObj = $("#" + treeNode.tId + "_a");
    //每个li结点下添加div
    if (treeNode.NODE_ISACC === 1) {
        aObj.append('<div class="diy swich  redFontColor redFont"></div>');
    } else {
        aObj.append('<div class="diy swich "></div>');
    }
    //树节点+-
    var switchObj = $("#" + treeNode.tId + "_switch");
    switchObj.remove();
    //移除ico
    var icoObj = $("#" + treeNode.tId + "_ico");
    icoObj.remove();
    //获取每个li结点
    var liObj = $("#" + treeNode.tId);
    //获取每个li结点下第一个div
    var div = $(liObj).find('div').eq(0);
    //添加+-
    div.append(switchObj);
    //添加结点name
    var spanObj = $("#" + treeNode.tId + "_span");
    spanObj.remove();
    div.append(spanObj);
    //+-之前添加空格
    var spaceStr = "<span class='blkSpaSpan' style='width:" + (spaceWidth * treeNode.level) + "px'></span>";
        switchObj.before(spaceStr);
    //这里可以接着构造div 只要append在aObj就可以
}

四、获取树节点数组

var zNodes = [];
    ajaxUtil({
        url : base + "/rest/textCheck/queryReportCompareVersionsInfo/"+templateId+"/"+setCode+"/"+date,
        type : "GET",
        async: false,
        success : function(object) {
            //最左边的树形目录数据
            $.each(object.chapterInfos, function(i, item) {
                zNodes.push({
                    id:item.id,
                    pId:item.pid,
                    name:item.name,
                    NODE_ISACC:item.isEq
                });
            });
        }
    });

五、初始化该树结构

$.fn.zTree.init($("#regionZTree"), menu_setting, zNodes);