webix.tree 修改表徵圖

最後更新：2016-11-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：set -- styles alt html 分享技術分享 har lang

今天用工作的時候改變了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 修改表徵圖

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

webix.tree 修改表徵圖

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support