easyui tree 根據url自定義圖標

近期由於項目中需要使用easyui tree樹形列表，並在系統中動態配置節點的圖標，根據官方demo，配置圖標只能使用iconCls樹形來對每個節點進行圖標的設置，這使得在數據庫存儲中需要存儲icon.css中的類名（類似icon-save）或者自定義的類名，同時，這需要提前在系統中對不同的圖標url設置好不同的類名，如果圖片不在系統中已知，則無法改變圖標。同時，由於本系統中需求比較特殊：各個功能在系統中進行配置，每一個功能是一個節點，每個節點需要可配置圖標，而且要求數據庫中存儲的是圖標的文件路徑，數據庫中結構如下：

圖標路徑存儲在WebPath字段中，要求根據其路徑生成圖標。對此，初步想法是測試
1、直接將該url賦值給iconCls字段，因爲查閱資料可以發現extjs等部分控件可以將url直接賦值給iconCls字段，對此進行測試：
在Dreamweaver 中添加如下代碼，直接初始化一個tree，並添加一個img確保圖標路徑正確

<h2>Editable Tree</h2>
    <p>Click the node to begin edit, press enter key to stop edit or esc key to cancel edit.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="padding:5px">
        <ul id="tt" class="easyui-tree" data-options="
                url: 'tree_data1.json',
                method: 'get',
                animate: true,
                onClick: function(node){
                    $(this).tree('beginEdit',node.target);
                }
            "></ul>
    </div>
    <img src="01.png"/>

tree_data1.json中數據如下：

[{
    "id":1,
    "text":"Folder1",
    **"iconCls":"01.png",**
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

設置一個節點的iconCls，如上代碼中加粗部分，查看顯示效果，結果如下圖：

發現修改的第一個節點Folder1圖標還是默認的，說明並沒有效果，F12查看此時的DOM節點，如下圖：

發現類名爲tree-icon的span節點上只是多了一個 01.png的類名，說明iconCls的配置只是將配置的字符以類名直接添加到span上，顯然不會有任何效果。

2、經過上面的測試，發現url直接賦值的形式無法解決，但是根據上面的DOM結構可以看出，設置的圖標就是將類名爲tree-icon的span元素的background屬性設置爲指定的圖片，而且默認的樣式都是採用外部連接方式進行設置的。這樣，根據CSS的優先級，只需要通過內聯方式設置background樣式將background屬性覆蓋即可。結合API和對各個事件、方法的測試，選定formatter屬性對數據進行一定的處理，在調試過程中發現formatter屬性對應的方法傳遞node參數，而且node中有一個屬性“domId”即爲最終DOM加載完成後樹節點的Id,則可以通過該id找到子節點中類名爲tree-icon的span元素，對它的background進行設置，代碼如下

$.ajax({
        type: "POST",
        url: "/Service/LSPRTAPI.asmx/GetMenuData",
        contentType: "application/json; charset=utf-8",
        data:'{"parentNo":"'+parentNo+'"}',
        dataType: 'json',
        success: function (data) {
            var icon = [];
            var paradata = eval('(' + data.d + ')');
            $('#tree' + parentNo).tree({
                data: paradata,
                onSelect: function (node) {
                    if (node==null || node.Url == null || node.Url.length<=0) {
                        return;
                    }
                    LoadUrl(node.Url, node.text);
                },
                formatter: function (node) {
                    icon.push({ "domId": node.domId, "webPath": node.Webpath });
                    return node.text;
                }
            });
            //根據url修改圖標，使用內聯樣式覆蓋外部鏈接
            $.each(icon, function (index, val) {
                $('#' + val.domId + ' .tree-icon').css("background", "url(" + val.webPath + ") no-repeat center center");
            });
        }

根據調試得到返回的JSON數據如下：

[
    {
        Parentno: "122",
        id: "123",
        text: "出讓方模塊",
        Fk_App: "LSPRT",
        Url: "",
        Webpath: "",
        children: [
            {
                Parentno: "123",
                id: "130",
                text: "出讓用戶管理",
                Fk_App: "LSPRT",
                Url: "admin\/BidTransferUser.aspx?ustate=0",
                Webpath: "img\/no.png"
            },
            {
                Parentno: "123",
                id: "131",
                text: "出讓信息審覈",
                Fk_App: "LSPRT",
                Url: "admin\/BidTransferAudit.aspx?ustate=0",
                Webpath: "img\/no.png"
            },
            {
                Parentno: "123",
                id: "132",
                text: "出讓掛牌設置",
                Fk_App: "LSPRT",
                Url: "admin\/BidTransferBoard.aspx?ustate=1",
                Webpath: "img\/01.png"
            }
        ]
    },
    {
        Parentno: "122",
        id: "134",
        text: "受讓方模塊",
        Fk_App: "LSPRT",
        Url: "",
        Webpath: "",
        children: [
            {
                Parentno: "134",
                id: "2116",
                text: "受讓用戶管理",
                Fk_App: "LSPRT",
                Url: "admin\/BidAssigneeUser.aspx?ustate=0",
                Webpath: "img\/01.png"
            },
            {
                Parentno: "134",
                id: "2117",
                text: "受讓信息審覈",
                Fk_App: "LSPRT",
                Url: "admin\/BidAssigneeAudit.aspx?ustate=0",
                Webpath: "img\/01.png"
            },
            {
                Parentno: "134",
                id: "2118",
                text: "取消受讓審覈",
                Fk_App: "LSPRT",
                Url: "admin\/BidAssigneeCancel.aspx?ustate=1",
                Webpath: "img\/01.png"
            }
        ]
    },
    {
        Parentno: "122",
        id: "2119",
        text: "組織交易",
        Fk_App: "LSPRT",
        Url: "admin\/BiddingList01.aspx",
        Webpath: "img\/01.png"
    },
    {
        Parentno: "122",
        id: "2120",
        text: "鑑證書模塊",
        Fk_App: "LSPRT",
        Url: "",
        Webpath: "",
        children: [
            {
                Parentno: "2120",
                id: "2121",
                text: "鑑證書管理",
                Fk_App: "LSPRT",
                Url: "ab\/abList01.aspx",
                Webpath: "img\/01.png"
            },
            {
                Parentno: "2120",
                id: "2122",
                text: "鑑證書變更管理",
                Fk_App: "LSPRT",
                Url: "ab\/abReplaceList01.aspx",
                Webpath: "img\/01.png"
            }
        ]
    }
]

最後效果如圖：

這裏有幾點需要注意：
1、在使用formatter屬性時，tree是還沒有生成DOM節點，所以這裏只是將domId和Webpath進行存儲，等樹加載完成後，再獲取DOM節點進行CSS屬性設置
2、tree的onSuccessLoad事件觸發時，是數據加載完成，並不是tree的DOM節點已經生成
3、測試時發現，圖標最好是16*16大小，太大可能會顯示不正常