webix.tree 修改图标
今天用工作的时候改变了easyui的tree的图标，回家试了下webix tree的图标修改 。文档里面给出了个下面的demo。
webix.ui({ view:"tree", type:{ folder:function(obj){ if(obj.$level == 1) return ""; if (obj.$level == 2) return ""; } } });
查看源代码发现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 "";
}
},
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前端框架，整个代码除了
以外的。 几乎都是js，。要是用单页模式开发。只要写一个index.html文件。整个系统的前端都可以用js完成。要够150 凑下字数-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------