EasyUI的功能樹之異步樹

最近幾個項目都用到了EasyUI這個Jquery框架，目前感受起來仍是很好使的，展現效果很好，幫助文檔什麼的資料不少，並且互聯網上Easy粉不少，大多數擁護和喜好EasyUI的粉絲們都願意在網絡平臺互相分享學習成果，甚至有專門的社區來討論使用狀況，網址是http://bbs.jeasyuicn.com/，裏面的資源模塊裏有不少都是免費的學習資料，包括視頻文檔項目源碼等，建議初學者去看視頻，而後研究一下這個網站（sypro）的實現http://sshe.jeasyuicn.com/，甚至有視頻教程教你們怎麼實現這個項目。互聯網是一個巨人，他博學多才，期待能站在巨人的肩膀上開開眼界，學習到更多的知識技能，對於未來或如今的工做都是一個很大的收穫。

　　本篇博客是對EasyUI中樹的實現的總結。若是想要展現一棵樹，有不少方式，固然要分析你的需求。若是是展現省市區、學校、部門等大數據的話，建議仍是使用異步加載。固然若是隻是展現幾個幾乎不變的菜單項，就能夠扁平化的展現你的數據了。

　　首先介紹怎麼實現一棵異步樹。

　　項目前準備:

　　一、首先你要搭建一個你熟悉的框架環境，而後再前臺加入EasyUI的源碼包，並在頁面引入js和css等文件。本文的實例主要講解怎麼實現樹，以SSH框架爲例。若是還有不懂怎麼搭建EasyUI框架的同窗，能夠在EasyUI的中文社區裏找EasyUI的初級視頻來看看，很是簡單的。

　　二、創建數據庫，比方說咱們要經過樹來展現你的菜單，那麼就要先看一下EasyUI中tree的Data Format，也就是說咱們要了解後臺傳給前臺什麼樣式的Json格式。

　　

　　從上面的文檔截圖能夠看出，他的數據格式有如下屬性：id,text,state,checked,attributes,children;

　　咱們在設計數據庫的時候，能夠儘可能的將節點id和節點名稱分別設置成id和text，這樣在前臺解析Json的時候就能直接認出這些屬性值，並顯示出數據來。固然利用擴展的方式的話，你能夠沒必要按照這些規範來，可是須要在tree控件裏傳入幾個參數來傳入屬性值。

　　首先，創建一個t_menu表：（註釋如圖）

　　

　　外鍵：

　　

　　測試數據：

    

　　

　　準備完以上的內容以後，咱們開始作demo。

　　一、加入EasyUI的樹控件：

 

<ul id="menuTree" class="easyui-tree" data-options="url:'<%=basePath%>menuAction!getTreeNode.action',parentField:'pid',lines:true,onLoadSuccess:function(node, data){$(this).tree('collapseAll')}"></ul>

 

 

 

　解析：

data-options裏的URL是Action的路徑，p

arentField設置成咱們model裏的pid，

lines:true用來顯示樹節點前的加減號，

onLoadSuccess:function(node, data){$(this).tree('collapseAll')}用來設置關閉全部的樹節點。

　　加入擴展js:

$.fn.tree.defaults.loadFilter = function (data, parent) {
    var opt = $(this).data().tree.options;
    var idFiled,
    textFiled,
    parentField;
    if (opt.parentField) {
        idFiled = opt.idFiled || 'id';
        textFiled = opt.textFiled || 'text';
        parentField = opt.parentField;
       
        var i,
        l,
        treeData = [],
        tmpMap = [];
       
        for (i = 0, l = data.length; i < l; i++) {
            tmpMap[data[i][idFiled]] = data[i];
        }
       
        for (i = 0, l = data.length; i < l; i++) {
            if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
                if (!tmpMap[data[i][parentField]]['children'])
                    tmpMap[data[i][parentField]]['children'] = [];
                data[i]['text'] = data[i][textFiled];
                tmpMap[data[i][parentField]]['children'].push(data[i]);
            } else {
                data[i]['text'] = data[i][textFiled];
                treeData.push(data[i]);
            }
        }
        return treeData;
    }
    return data;
};

最後展現實現效果：當單擊加號的時候纔會加載其子節點，異步實現了功能樹。