【zTree】将zTree节点前的展开收起图标（加减号）改为三角形图标

zTree是jQuery 树插件，官网地址。

新需求：把树节点前的加减号图标，改为三角形图标；去掉图标；去掉连接线；

修改前与修改后对比

去掉图标；去掉连接线

参考地址：http://www.treejs.cn/v3/demo.php#_103
按照官网文档在setting里配置就行，代码如下：

var setting = {
   view: {
        selectedMulti: false,
        addDiyDom: addDiyDom, // 自定义显示节点
        showIcon:false, // 不显示图标,文件夹图标等
        showLine:false // 不显示连接线
    },
    simpleData: {
        enable: true
    },
    async: {
        enable: true,
        url:url,
        autoParam:["id", "name=n", "level=lv"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        dataFilter: filter  // 数据处理
    },
    callback: {
        onClick: nodeClick, // 节点点击事件（可对不同级别的节点做不同的点击处理）
        onAsyncSuccess: zTreeOnAsyncSuccess // 获取接口数据后的回调函数，在此函数里设置全部展开
    }
};
// 以下代码是方便以后查资料
zTree = $.fn.zTree.init($("#treeDemo"), setting);
function zTreeOnAsyncSuccess() {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    treeObj.expandAll(true);
}
// 树节点自定义
function addDiyDom(treeId, treeNode) {
    var spanObj = $("#" + treeNode.tId + "_span");
    //每个li结点下添加div
    if (treeNode.NODE_ISACC === 1) {
        var descStr = treeNode.desc ? '（'+treeNode.desc+'）' : '';
        if(treeNode.desc == '未上传'){
            spanObj.append('<span class="orangeFontColor">'+ descStr +'</span>');
        }else{
            spanObj.append('<span class="redFontColor">'+ descStr +'</span>');
        }
    }
}

// 树节点点击事件
function nodeClick(event, treeId, treeNode, clickFlag) {
    console.log('nodeClick',treeNode)
    if (treeNode.level == 3) {
    	// 最后一级的点击事件
		$('#treeDemo').css('display', 'none');
        sessionStorage.setItem("projectId", treeNode.id)
    } else {
        addSubNode(treeNode);
    }
}

function addSubNode(treeNode) {
   // console.log('addSubNode',treeNode.id);
    var s = treeNode.children;
    if (s != undefined)
        return;
    if(treeNode.level == 2){
        // 获取最后一级
        $.ajax({
            cache: true,
            type: "POST",
            url: url,
            data: {projectId: treeNode.id},
            async: true,
            success: function (data) {
                var childNodes = [];
                data = JSON.parse(data)
                $.each(data.obj, function (index, item) {
                    childNodes.push({"id": item.id, "pId": index + index, "name": item.name,"NODE_ISACC":1,"desc":item.desc})
                })
                zTree.addNodes(treeNode, childNodes);
            },
            error: function (data) {
                alert("error");
            }
        });
    }
}

将展开收起图标（加减号）改为三角形

有个博客是用伪元素显示三角形图标的，大家也可以试试。

在查看加减号图标代码时发现，加减号图标实际上是取图片的特定位置显示，如下图所示：

那么我们只需要覆盖样式，放上自己的图片就行了。

1. 将自己的三角形图标copy到img目录下
2. 找到zTree引入文件中的zTReeStyle.css文件，并写上对应样式
   

/* 树--三角形 start 2019-12-16 */
.ztree li span.button.noline_open {
	background-image: url("img/tree_open.png");
	background-position: center;
}

.ztree li span.button.noline_close {
	background-image: url("img/tree_close.png");
	background-position: center;
}
/* 显示叶子节点的收起三角形图标 */
.ztree span.button.level2.noline_docu {
	background-image: url("img/tree_close.png");
	background-position: center;
	background-repeat: no-repeat;
}
/* 树--三角形 end */

3. 若有filter函数的话，需要将icon置空

function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    childNodes.obj.forEach(function (item) {
        item.parentId?item.level = 2:item.level = 1;
        item.icon = '';
        item.iconClose = '';
        item.iconOpen = '';
    })
    return childNodes.obj;
}

对收起三角形图标绑定点击事件

项目里用到的树是：（1）异步加载数据，并且完全展开到倒数第二级；（2）在点击倒数第二级时再异步加载对应数据。
也就是说，对于树控件来说，第一次异步加载的数据中倒数第二级就是树的叶子节点，而叶子节点是没有展开收起图标的。虽然用样式给了叶子节点一个收起三角形图标，但却是假的，点击后没有任何效果。只有点击叶子节点名称，在点击事件nodeClick里异步加载好数据后，用zTree.addNodes(treeNode, childNodes);添加到叶子节点上。

所以，在这里需要对叶子节点前的收起三角形图标绑定点击事件。

// 树图标点击
$("body").on("click", ".button.level2.switch.noline_docu", function (el) {
     // console.log(el,$(el.currentTarget).next().click());
     $(el.currentTarget).next().click()
     return false
 });

这样就能过测试那关啦