使用ztreejs纯前端实现四级类别展示并且设置节点的图标

引入ztree.js文件和样式文件

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.ztree.core.min.js"></script>

准备数据

var zNodes = [
    { id:1, pId:0, name:"父类别1", open:true},
    { id:11, pId:1, name:"子类别1"},
    { id:12, pId:1, name:"子类别2"},
    { id:13, pId:1, name:"子类别3"},
    { id:2, pId:0, name:"父类别2", open:true},
    { id:21, pId:2, name:"子类别4"},
    { id:22, pId:2, name:"子类别5"},
    { id:23, pId:2, name:"子类别6"},
    { id:3, pId:0, name:"父类别3", open:true},
    { id:31, pId:3, name:"子类别7"},
    { id:32, pId:3, name:"子类别8"},
    { id:33, pId:3, name:"子类别9"},
    { id:4, pId:0, name:"父类别4", open:true},
    { id:41, pId:4, name:"子类别10"},
    { id:42, pId:4, name:"子类别11"},
    { id:43, pId:4, name:"子类别12"}
];

初始化ztree

var setting = {
    view: {
        showIcon: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: onClick
    }
};

function onClick(e, treeId, treeNode) {
    console.log(treeNode.name);
}

$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

设置节点图标

var setting = {
    view: {
        showIcon: true
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: onClick
    },
    edit: {
        enable: true
    },
    check: {
        enable: true
    },
    view: {
        addDiyDom: addDiyDom
    }
};

function addDiyDom(treeId, treeNode) {
    var aObj = $("#" + treeNode.tId + "_a");
    if (treeNode.level == 0) {
        aObj.addClass("parent-level-0");
    } else if (treeNode.level == 1) {
        aObj.addClass("parent-level-1");
    } else if (treeNode.level == 2) {
        aObj.addClass("parent-level-2");
    } else if (treeNode.level == 3) {
        aObj.addClass("parent-level-3");
    }
}

$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

设置节点图标样式

.parent-level-0 {
  background-image: url("images/parent-level-0.png");
}

.parent-level-1 {
  background-image: url("images/parent-level-1.png");
}

.parent-level-2 {
  background-image: url("images/parent-level-2.png");
}

.parent-level-3 {
  background-image: url("images/parent-level-3.png");
}
``