easyui tree页面加载速度慢

前台代码:

$("#bzfxtree").tree({
    method: "get",
    lines: true,
    url: "./iface/findEprjStdListLibTree",
    queryParams:{stdListLibId:stdListLibId,flag:flag},
	checkbox:true,
    onlyNodeExpand: false,
    autoBindDblClick: false,
    toggleOnClick: true,
    onClick:function(node){
    },
    onDblClick:function(node){;	
    },
    loadFilter:function(data,parent){
		return dispTreeNode(data);
	},
	onLoadSuccess:function(){;
	},
});

/**
 * 处理树节点
*/
function dispTreeNode(data){
	for(var i=0;i<data.length;i++){
		var node=data[i];
		if (node["children"] && node["children"].length>0){
			node["state"]="closed";			
			node["children"]=dispTreeNode(node["children"]);
		}
	}
	return data;
}

后台代码(spring+struts2):

xml配置文件:

<action name="findEprjStdListLibTree" method="findTreeNode" class="cost-eprjStdListAction" >
    <param name="contentType">text/html</param>
	<param name="arrayKey">treeNodeList</param>
	<param name="includeProperties">treeNodeList.*</param>
	<param name="ignoreHierarchy">false</param>
	<param name="excludeNullProperties">true</param>
</action>

java代码:

protected List<BaseTreeNode<?,?>> treeNodeList=new ArrayList<BaseTreeNode<?,?>>();

public String findTreeNode()
{
	Map<Long,EasyuiTreeData> map=new HashMap<Long, EasyuiTreeData>();
	if(this.stdListLibId!=null)
	{
		List<StdListItems> items=stdListItemsService.getList();
		for(StdListItems entity:items)
		{
			EasyuiTreeData treeNode=new EasyuiTreeData();
			treeNode.setCode(entity.getId());
			String unit = entity.getUnit();
			String name=entity.getSecName();
			treeNode.setName(entity.getListCode()+" "+name+unit);
			treeNode.setAttribute("flag", entity.getFlag());
			treeNode.setAttribute("listCode", entity.getListCode());
			treeNode.setAttribute("secUid", entity.getSecUid());
			if(map.get(entity.getParentId())!= null && entity.getParentUid()!="-1") 
			{
				map.get(entity.getParentId()).getChildNodes().add(treeNode);						
			}else
			{
				this.treeNodeList.add(treeNode);
			}
			map.put(entity.getId(), treeNode);
		}
	}
	return "tree";
}

java 后台的easyUI 的tree的树结构:

/**
 * 基于easyui-tree的数据结构
 */
public class EasyuiTreeData extends BaseTreeNode<Map<String,String>, Serializable>{

	private static final long serialVersionUID = -4799601739119786722L;
	
	/**
	 * 树节点数据
	 */
	public static final String TREE="tree";
	/**
	 * map节点数据
	 */
	public static final String MAP="map";

	public EasyuiTreeData()
	{
		this.setObject(new HashMap<String,String>());
	}
	/**
	 * @return
	 */
	public Serializable getId()
	{
		return this.getCode();
	}
	
	/**
	 * 
	 * @return
	 */
	public String getText()
	{
		return this.getName();
	}
	
	/**
	 * 
	 * @return
	 */
	public List<?> getChildren()
	{
		return this.getChildNodes();
	}
	
	/**
	 * 设置url
	 * @param url
	 */
	public void setUrl(String url)
	{
		if (url==null)
		{
			this.getObject().remove("url");
		}else
		{
			this.getObject().put("url", url);
		}
	}
	/**
	 * 设置参数
	 * @param key
	 * @param data
	 */
	public void setAttribute(String key,String data)
	{
		this.getObject().put(key, data);
	}
	/**
	 * 设置参数
	 * @param key
	 * @param data
	 */
	public void setAttribute(String key,Number data)
	{
		this.getObject().put(key, String.valueOf(data));
	}
	/**
	 * 子属性
	 * @return
	 */
	public Map<String,String> getAttributes()
	{
		return this.getObject();
	}
	
	
}

这种方式,后台查询速度还是可以的,但是从后台传递到前台的时候,因为后台的数据要转化为json字符串,而且treeNodeList里面是easyui的tree节点,该tree的节点含有父节点ID,每个节点还有子节点的list集合,导致在转化为json的时候用了大量的时间,后台改为直接在后台转化为json字符串,然后在tree的loadFilter里面把json数据使用eval转化为对象,修改后时间大大缩短.

修改的地方:

java获取树结构从对象的list集合转化为JsonArray对象:

public String findTreeNode()
{
	JSONArray jsonArray = new JSONArray();//数组使用JSONArray 
	Map<Long,JSONObject> map=new HashMap<Long, JSONObject>();
	if(this.stdListLibId!=null){
		List<StdListItems> items=stdListItemsService.getList();
		for(StdListItems entity:items)
		{
			JSONObject json = new JSONObject("{}");
			json.put("code", entity.getId());
			String unit = entity.getUnit();
			String name=entity.getSecName();
			json.put("text", entity.getListCode()+" "+name+unit);
			JSONObject json2 = new JSONObject("{}");//每一个数节点使用JSONObject 
			json2.put("flag", entity.getFlag());
			json2.put("listCode", entity.getListCode());
			json2.put("secUid", entity.getSecUid());
			json.put("attributes", json2);
			JSONArray jsonArray2 = new JSONArray();//树节点的子节点的list集合使用JSONArray 
			json.put("children", jsonArray2);
			
			if(map.get(entity.getParentId())!= null && entity.getParentUid()!="-1") 
			{
				JSONObject json3 = map.get(entity.getParentId());
				json3.getJSONArray("children").put(json);
			}else
			{
				jsonArray.put(json);
			}
			map.put(entity.getId(), json);
		}
	}
	
	this.data = jsonArray.toString();//直接转化为jsonArray对象
	return SUCCESS;
}

xml修改:

<result name="success" type="json">
	<param name="contentType">text/html</param>
	<param name="includeProperties">returnCode,message,data.*</param>
	<param name="ignoreHierarchy">false</param>
</result>

easyui的tree的loadFilter修改:

/**
 * 处理树节点
 */
function dispTreeNode(data)
{
	if (data.data) {
		data = data.data;			
		data=eval('('+data+')');//把从后台取到的JSONArray的json对象转化为tree能够加载的数组
	}
	for(var i=0;i<data.length;i++)
	{
		var node=data[i];
		if (node["children"] && node["children"].length>0)
		{
			node["state"]="closed";			
			node["children"]=dispTreeNode(node["children"]);
		}
	}
	return data;
}

总结：对于数据量特别大的，需要传递到前台，可以把需要前台接收的数据转化为JSON对象,可以是JSONArray (List),或者一个对象JSONObject(单个对象).

来源：oschina

链接：https://my.oschina.net/u/2331760/blog/4535179