EasyUI tree 筆記(2) 改變圖標問題

Tree是建立了但是如何操作?
 http://www.jeasyui.net/plugins/185.html
裏頭有詳細說明 功能很強 包山包海
但我卻在改變圖標部份 卡住了
他有DEMO http://www.jeasyui.net/demo/412.html
但他的也沒變化 神奇是有些網站卻看得到
說明是加一個 iconCls:"icon-add" 這樣就會變
他XD 哪有變  不知是版本改壞了 還是怎的 反正試老半天
證實就是不行


查到這篇 easyui tree 根据url自定义图标
研究一下
他是用抓 Node ID 再用 jquery 去改變 Css 是有用的
他是寫的詳細但有點複雜
總之
先找個 icon 放到 imgs 目錄內

然後在資料 Load 進來再去變
我是測試 所以就 按到時再變
 $('#QusTree').tree({
        url: Surl,
        lines: true,
       onClick: function (node) {
            // node.text = '<span style="font-weight:bold">new text</span>';
            // $('#QusTree').tree('update', node);如果改內容要跟新 才會變
           
             //就是抓  node.domId  把圖 /imgs/stop.ico 指給他 就好 
            $('#' + node.domId + ' .tree-icon').css("background", "url('/imgs/stop.ico') no-repeat center center");
           
        },

//他的方法是利用 formatter 事件 將 id 跟 圖位置(後臺放到 webpath 欄位) 先加到 icon 陣列
formatter: function (node) {
                    icon.push({ "domId": node.domId, "webPath": node.Webpath });
                    return node.text;
                }

然後掃一次
$.each(icon, function (index, val) {
                $('#' + val.domId + ' .tree-icon').css("background", "url(" + val.webPath + ") no-repeat center center");
            });

簡化一下 就是
var icon = [];
 $('#QusTree').tree({
        url: Surl,
        lines: true,
     formatter: function (node) {
            icon.push({ "domId": node.domId});
            return node.text;
        },
        onLoadSuccess: function (node, data){
            $.each(icon, function (index, val) {
                $('#' + val.domId + ' .tree-icon').css("background", "url('/imgs/stop.ico') no-repeat center center");
            });
        },
........
就是這樣 就全變了 其他應用變化 就簡單了


留言

熱門文章