Webix. tree modify icon, webix. tree icon
Today, I changed the easyui tree icon when I was working. I went home and tried to modify the webix tree icon. The following demo is provided in the document.
webix.ui({ view:"tree", type:{ folder:function(obj){ if(obj.$level == 1) return "<span class='webix_icon fa-folder-open'></span>"; if (obj.$level == 2) return "<span class='webix_icon fa-video-camera'></span>"; } }});
Check the source code and find that obj is the data of each node in data. The original icon seems to be a style, so it is not covered. Imitating easyui tree and iconCls, you can change the icon to redefine the type foder. As follows:
Webix has many icons, which are listed in Several icons that often appear in life. You can view the other icons. More than 500 types are listed. The Code is as follows:
<! DOCTYPE html>
On :{
"OnItemClick": function (id ){
Var item = this. getItem (id );
Webix. alert ({title: "prompt", text: item. value });
}
}
}) ;
</script>
</body>
The red part of the code is the key to changing the icon. You can directly put it in an html file and open it to see the effect. There are also many webix styles that I use in gray. You may be colored.
Webix is a js front-end framework, and the entire Code except the <body>. Almost all of them are js ,. For Development in single-page mode. You only need to write an index.html file. The front-end of the entire system can be completed using js.
We need to generate 150 words in total -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
