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")
	@ResponseBody
	public 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"));
			// 该节点有子节点
			// 设置为关闭状态,而从构造异步加载tree
			if (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格式了,是不是非常方便呢?至于这种方式的原理,我自己也没弄清楚呢,可以的话童鞋们可以补充解惑下!

EasyUI异步加载Tree实现(另类,简洁)