首页 > 代码库 > webix.tree 修改图标

webix.tree 修改图标

2024-08-20 23:14:13   226人阅读

今天用工作的时候改变了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 修改图标


联系
我们