今天用工作的时候改变了easyui的tree的图标，回家试了下webix tree的图标修改 。文档里面给出了个下面的demo。

  1. webix.ui({
  2.     view:"tree",
  3.     type:{
  4.         folder:function(obj){
  5.             if(obj.$level == 1)
  6.                 return "<span class=\'webix_icon fa-folder-open\'></span>";
  7.             if (obj.$level == 2)
  8.                 return "<span class=\'webix_icon fa-video-camera\'></span>";
  9.         }
  10.     }
  11. });

查看源代码发现obj为data中每个节点的数据。他原来的icon好像也是某个样式，就没有覆盖，模仿easyui tree 加iconCls 就可以改变图标重新定义了下type的foder。效果图如下

webix有很多图标，这里列了几个生活中常出现的图标，具体图标可以去看下另一个随笔。列了500多种。代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css" type="text/css" media="screen" charset="utf-8">
  6.     <script src="http://cdn.webix.com/edge/webix.js" type="text/javascript" charset="utf-8"></script>
  7.     <title>webix树标签</title>
  8. </head>
  9. <body>
  10. <script>
  11.     webix.ui({
  12.         view: "tree",
  13.         width: 260,
  14.         drag: true,
  15.         type: {
  16.             folder: function (obj) {
  17.                 if (obj.iconCls)
  18.                     return "<span class=\'webix_icon fa-" + obj.iconCls + "\'></span>";
  19.             }
  20.         },
  21.         data: [{
  22.             open: true,
  23.             value: "配置管理",
  24.             iconCls: "cogs",
  25.             data: [{
  26.                 iconCls: "cog",
  27.                 value: "进货管理"
  28.             }, {
  29.                 iconCls: "leaf",
  30.                 value: "出货管理"
  31.             }, {
  32.                 iconCls: "heart",
  33.                 value: "配置发布"
  34.             }]
  35.         }, {
  36.             value: "报表管理",
  37.             open: true,
  38.             iconCls: "bar-chart-o",
  39.             data: [{
  40.                 iconCls: "qq",
  41.                 value: "访问量报表"
  42.             }]
  43.         }, {
  44.             value: "账户管理",
  45.             iconCls: "wechat",
  46.             open: true,
  47.             data: [{
  48.                 iconCls: "android",
  49.                 value: "个人账户管理"
  50.             }, {
  51.                 iconCls: "apple",
  52.                 value: "系统账户管理"
  53.             }]
  54.         }],
  1. on: {
        "onItemClick": function (id) {
            var item = this.getItem(id);
            webix.alert({title:"提示",text:item.value});
        }
    }
  1. }) ; 

    </script> 

    </body> 

    </html>

红色部分代码，是改变图标的关键，可以直接放到html文件中，打开就能看到效果。还有webix有很多种样式，我用的是灰色的。你们的可能是彩色的。

 

webix是js前端框架，整个代码除了<body>以外的。 几乎都是js，。要是用单页模式开发。只要写一个index.html文件。整个系统的前端都可以用js完成。

 

要够150 凑下字数———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————–

 

版权声明：本文为lijinxin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lijinxin/p/6063949.html