【若依(ruoyi)】ztree 自定义图标（iconSkin 属性）

前言

• ruoyi 4.6.0
• JQuery zTree core 3.5.12

创建 iconSkin

.ztree li span.button.ico2_ico_open{
    margin-right:2px; background-position: -147px -21px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico2_ico_close{
    margin-right:2px; margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}
.ztree li span.button.ico2_ico_docu{
    margin-right:2px; background-position: -147px 0; vertical-align:top; *vertical-align:middle}

• .ztree li span.button.ico2_ico_open ：支节点展开状态的样式
• .ztree li span.button.ico2_ico_close ：支节点折叠状态的样式
• .ztree li span.button.ico2_ico_docu ：叶子节点的样式
• .ztree li span.button.<iconSkin 名称>_ico_open ：<iconSkin 名称> 可自定义
• iconSkin ico2：.ztree li span.button.ico2_ico_docu 的图标设置成与.ztree li span.button.ico2_ico_close的图标一致

使用iconSkin方式1：

var setting = ...;
//js中节点数据：
var zTreeNodes = [
	//父节点展开 折叠时使用相同的图标
	{
     name:"父节点1", iconSkin:"diy01"},

	//父节点展开 折叠时分别使用不同的图标
	{
     name:"父节点2", iconSkin:"diy02"},

	//叶子节点个性化图标
	{
     name:"叶子节点", iconSkin:"diy03"}
];
//zTree 初始化
$.fn.zTree.init($("#tree"), setting, zTreeNodes);

使用iconSkin方式2：

var treeObj = $.fn.zTree.getZTreeObj("tree");
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
treeNodes.forEach(treeNode => {
    
	if (!treeNode.isParent) {
    
		/* 将叶子节点的iconSkin设置为：ico2 */
		treeNode.iconSkin = "ico2";
		treeObj.updateNode(treeNode);
	}
});

参考

https://treejs.cn/v3/api.php