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 凑下字数-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

时间: 2024-10-11 13:03:15

webix.tree 修改图标的相关文章

ionic中修改图标的问题

有两种修改图标的方法,一种是手动配置,另外一种是使用命令 1.手动配置 把图标icon.png复制到resources\android\icon目录下 修改根目录的config.xml文件 <platform name="android"> <icon src="resources/android/icon/icon.png" /> <splash src="resources/android/splash/splash.pn

HDOJ 题目2763 Housewife Wind(Link Cut Tree修改边权,查询两点间距离)

Housewife Wind Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 7639   Accepted: 1990 Description After their royal wedding, Jiajia and Wind hid away in XX Village, to enjoy their ordinary happy life. People in XX Village lived in beautif

【UWP】批量修改图标尺寸

UWP开发中项目用到的图标资源非常多,通常每一种图标都有几种不同的尺寸,一般来说,我的项目所有Package.appxmanifest用到的图标就有40个,通常这些图标都是一样的,只是尺寸大小不一而已,每次生成不同尺寸的图标的时候都得花好长时间,于是写了一个批量生成多种尺寸和不同名称的图片,下面演示一遍 效果如图 选择一张图片,然后Save Icons就可以了,生成的图片会保存到选择图片路径下的 out put文件夹下,也可以在右边添加额外的尺寸,默认自带了一些尺寸 源代码:http://fil

ActionBar隐藏修改图标和标题

有时候在一些子页面或者内容页面,不需要显示ActionBar的标题栏图标.可用如下方式进行设置. 首先获取到ActionBar对象 ActionBar actionBar=getActionBar(); 使用android:logo属性.不像方方正正的icon,logo的图像不会有任何宽度限制. logo图像典型的给你的APP提供品牌.当你有Logo的时候,你可以隐藏label. 默认的,ActionBar使用Activity的android:icon属性,还有一致的android:label属

Extjs tree 更改图标

去掉 树的叶子图标 .x-tree-node-icon { display: none; //不显示图标 } 更改图标  在后台返回的json中 有  添加  iconCls 属性 如    iconCls:'mask' .mask { background-image: url(img/icon/add.gif) !important; } example 下   treegrid 例子中

Android TabHost 动态修改图标或者动态改变标题

那时客户需要实现在TabHost标题上动态显示从数据库获取的个数.起初这样思考的,从数据库 获取个数是非常简单,但是要把获取的个数显示在TabHost标题,思前想后,想用Handler来异步实现消息传递. 如果将图标或者标题的变量设置为全局变量,你们应该知道我的目的吧.也就是为了在这个类不断的进行赋值. 先来简单的认识下TabHost吧. xml的文件代码: <?xml version="1.0" encoding="utf-8"?> <TabHo

Windows10无法修改图标字体和菜单栏字体问题 —— regedit注册表修改

1.打开注册表  regedit 2.修改如图所示的几个表  分别单击 选择修改 CaptionFont IconFont MenuFont MessageFont SmCaptionFont 修改完后确定重启电脑 ------------OK 原文地址:https://www.cnblogs.com/star521/p/9153253.html

easyui tree 更改图标

,onLoadSuccess: function (node, data) { $('#tt .tree-icon').css("background", "url(/Assets/jquery-easyui-1.5/themes/icons/man1.png) no-repeat center center"); }

URAL 题目1553. Caves and Tunnels(Link Cut Tree 修改点权,求两点之间最大)

1553. Caves and Tunnels Time limit: 3.0 second Memory limit: 64 MB After landing on Mars surface, scientists found a strange system of caves connected by tunnels. So they began to research it using remote controlled robots. It was found out that ther