[ruoyi] ztree custom icon (iconskin attribute)

Preface

• ruoyi 4.6.0
• JQuery zTree core 3.5.12

establish 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 ： Style of branch node expansion status
• .ztree li span.button.ico2_ico_close ： The style of the folded state of the branch node
• .ztree li span.button.ico2_ico_docu ： The style of leaf nodes
• .ztree li span.button.<iconSkin name >_ico_open ：<iconSkin name > Customizable
• iconSkin ico2：.ztree li span.button.ico2_ico_docu The icon of is set to be the same as .ztree li span.button.ico2_ico_close The icons of are consistent

Use iconSkin The way 1：

var setting = ...;
//js Middle node data ：
var zTreeNodes = [
	// The parent node expands   Use the same icon when folding 
	{
     name:" Parent node 1", iconSkin:"diy01"},

	// The parent node expands   Use different icons when folding 
	{
     name:" Parent node 2", iconSkin:"diy02"},

	// Personalized icon of leaf node 
	{
     name:" Leaf node ", iconSkin:"diy03"}
];
//zTree  initialization 
$.fn.zTree.init($("#tree"), setting, zTreeNodes);

Use iconSkin The way 2：

var treeObj = $.fn.zTree.getZTreeObj("tree");
var treeNodes = treeObj.transformToArray(treeObj.getNodes());
treeNodes.forEach(treeNode => {
    
	if (!treeNode.isParent) {
    
		/*  Set the leaf node's iconSkin Set to ：ico2 */
		treeNode.iconSkin = "ico2";
		treeObj.updateNode(treeNode);
	}
});

Reference resources

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