目前,不知道为什么,TreeStore只支持按节点异步加载数据。2.0的时候,可以根据配置选择是异步加载还是一次性加载。
当然,数据可以一次请求(root)的时候都传递给前台,但是TreeStore只解析第一层节点。所以,面临两个问题:
1. 非根节点的expand事件,会去触发load方法,从后台加载数据解析,也就是异步。
2. root请求,只解析一层,其他层的JSON数据,不能被解析成NodeInterface。
解决方案
1. 重写TreeStore的fillNode()方法,一次性把所有的节点都解析出来。关键代码如下:
if (newNodes.length) { node.appendChild(newNodes, undefined, true); root = this.getRootNode(); if (root.raw.loadOnce) { // 一次性加载、解析,注意:只支持二级 for (var k = 0; k < newNodes.length; k++) { var chirldren = newNodes[k].data.children; if (chirldren.length) { newNodes[k].appendChild(chirldren, undefined, true); } } } }
此处只为表意,如果需要支持无限级解析,只需抽象成递归方法即可。
2. 在自定义的Store中,禁止非root节点的load事件,拦截beforeload事件。代码如下:
listeners: { 'beforeload': function (store, operation) { if (operation.id !== 'root') { return false; } } }
3. 添加配置参数
root: { expanded: true, loadOnce: true, checked: false },
搞定!