EasyUI非同步載入Tree實現(另類,簡潔)

標籤：easyui   tree   非同步   

前言

        前幾天事情比較的多,回學校時候行李,郵寄包裹,歸還圖書準備畢業。之後又是入職體檢,各種瑣碎的小事,文章也停更了幾次。今天正好有一些零碎的時間可以把之前的工作內容做一個總結整理。這篇文章就是關於EasyUI實現非同步載入樹的。

非同步Tree

        首先需明白的是這裡所說的非同步載入是一個寬泛的概念。以一個實際的樹形菜單為例,一般情況下在資料量不大的時候,我們可以一次性的把資料載入出來,這是符合常理的。但是如果資料量大,更加合適的做法便是按樹的層級,動態載入某層級的資料,這樣的一種描述就是這裡所說的非同步了,實現了這種操作方式的Tree則稱為非同步樹。

        理解了這些來看具體如何是實現。

前端代碼

       EasyUI本身就提供了Tree組件的,而且easyui的官網也提供了非同步載入樹的demo了,但是由於沒有涉及到背景資料互動,對於一些剛入門的童鞋來說實現的方式還是不夠具體,這裡我就借花獻佛具體一把唄。

HTML

      這裡我使用html標記來定義樹,代碼如下:

//外層的div不用理會,出於布局的考慮<div data-options="region:'west',split:true,border:true" style="width:160px" id="menu">    <ul class="easyui-tree" id="mm-tree">    </ul></div>

JS

       之後使用js指令碼對tree進行相關的初始化操作:

//初始化類別樹狀目錄        $('#mm-tree').tree({            url: 'mm/getMMTypeList?mmid=',            onClick: function(node) {                if (node != null) {                    alert("顯示物料類別ID為:" + node.id + "的物料列表");                    $('#dgs').datagrid('reload');//根據點擊的節點,更新其他資料                }            },            onBeforeLoad: function(node, param) {                if (node == null) {                    $('#mm-tree').tree('options').url = "mm/getMMTypeList?mmid=";//載入頂層節點                } else {                    $('#mm-tree').tree('options').url = "mm/getMMTypeList?mmid=" + node.id;//載入下層節點                }            }        });

後台代碼

       後台架構選中的是Spring MVC,讀者如果使用其他架構參考其實現邏輯即可。其實初入門的童鞋實現非同步tree的困惑不在於資料的擷取,而在於資料的結構問題。說到底是對返回給前端EasyUI Tree的JSON格式不清楚。OK,一起看看easyui tree的json格式吧!還是從官網入手,我們就看官網的非同步Tree的實現demo,地址如下:http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=default&dir=ltr&pitem=

      之後我們點擊左側菜單的“非同步Tree”,按F12開啟瀏覽器開發人員工具,點擊network即可看到如下內容:

      找個線上的JSON美化工具美化下JSON格式即可,美化後的JSON就比較易懂了:

[  {    "id": "7",     "text": "Node 1.1.1",     "state": "open"  },   {    "id": "8",     "text": "Node 1.1.2",     "state": "open"  },   {    "id": "9",     "text": "Node 1.1.3",     "state": "open"  }]

        不過這個是每一個節點載入的JSON資料,並沒體現出各個節點的關係,還得去官網查閱其JSON格式。至於官網的JSON格式我這裡就不在貼圖了,自己構造比較的麻煩。這裡我突發奇想參考以前看過的一篇文章看能否實現:

http://blog.csdn.net/weiweiai123456/article/details/21230735

        按照該文章的思路,我們要根據資料庫的關係去通過"_parentId"構建json格式,以下是我的後台代碼:

 @RequestMapping("/mm/getMMTypeList")@ResponseBodypublic List<Map<String, Object>> getMMTypeList(@RequestParam("mmid") String mmid) {List<Map<String, Object>> nodes = mmFacade.getMMTypeListByMMCateGoryId(mmid).getObjList();List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();for (Map<String, Object> node : nodes) {Map<String, Object> item = new HashMap<String, Object>();item.put("id", node.get("id"));item.put("text", node.get("categoryname"));// 該節點有子節點// 設定為關閉狀態,而從構造非同步載入treeif (mmFacade.hasChild(node.get("id").toString())) {item.put("state", "closed");item.put("iconCls", "icon-save");}items.add(item);}return items;}

        思路比較的明顯,預設載入的是頂層的節點,並根據其是否有子節點設定器開關狀態。當前台點擊了某個節點時,在根據節點的ID去載入下一層節點。依次類推,直到一層層的載入完畢。

        撇開思路不提,這裡需要確定的是EasyuiTree能否解析該JSON格式,答案當然是可以的啦,這裡筆者親自嘗試了的,是可以的,如所示:

        哈哈,這種通過添加一個_parentId的方式就能非常簡單的構建Tree JSON格式了,是不是非常方便呢?至於這種方式的原理,我自己也沒弄清楚呢,可以的話童鞋們可以補充解惑下!