webix.tree 修改图标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webix.tree 修改图标相关的知识，希望对你有一定的参考价值。
今天用工作的时候改变了easyui的tree的图标，回家试了下webix tree的图标修改 。文档里面给出了个下面的demo。
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>"; } } });
查看源代码发现obj为data中每个节点的数据。他原来的icon好像也是某个样式，就没有覆盖，模仿easyui tree 加iconCls 就可以改变图标重新定义了下type的foder。效果图如下
webix有很多图标，这里列了几个生活中常出现的图标，具体图标可以去看下另一个随笔。列了500多种。代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" media="screen" charset="utf-8"> <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script> <title>webix树标签</title> </head> <body> <script> webix.ui({ view: "tree", width: 260, drag: true, type: { folder: function (obj) { if (obj.iconCls) return "<span class=‘webix_icon fa-" + obj.iconCls + "‘></span>"; } }, data: [{ open: true, value: "配置管理", iconCls: "cogs", data: [{ iconCls: "cog", value: "进货管理" }, { iconCls: "leaf", value: "出货管理" }, { iconCls: "heart", value: "配置发布" }] }, { value: "报表管理", open: true, iconCls: "bar-chart-o", data: [{ iconCls: "qq", value: "访问量报表" }] }, { value: "账户管理", iconCls: "wechat", open: true, data: [{ iconCls: "android", value: "个人账户管理" }, { iconCls: "apple", value: "系统账户管理" }] }],
on: {
"onItemClick": function (id) {
var item = this.getItem(id);
webix.alert({title:"提示",text:item.value});
}
}
}) ;
</script>
</body>
</html>
红色部分代码，是改变图标的关键，可以直接放到html文件中，打开就能看到效果。还有webix有很多种样式，我用的是灰色的。你们的可能是彩色的。
webix是js前端框架，整个代码除了<body>以外的。 几乎都是js，。要是用单页模式开发。只要写一个index.html文件。整个系统的前端都可以用js完成。
要够150 凑下字数-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
以上是关于webix.tree 修改图标的主要内容，如果未能解决你的问题，请参考以下文章
带有操作栏图标单击的 NavigationUI 导致片段淡入淡出