EasyUI，Tree组件，异步树，undefined问题及其解决方案

使用EasyUI Tree组件，构建异步树的过程中，碰到各种问题，最严重的是undefined问题。
官方异步树示例：http://www.jeasyui.net/tutorial/57.html

一、问题概要：使用EasyUI异步Tree，父子结构正常，所有父子节点为undefined

---

二、项目条件：SSM框架，easyui，jsp
三、Tree构建方案：controller->json数据->Tree组件处理
Q:为什么要多个处理过程？loadFilter为什么要用convert()函数处理？

ANS1:不处理会出现父子级菜单错乱问题。

ANS2:easyui的tree的属性比较限制，他的valueField和textField对应的值必须是"id"和"text"。

原文传送门：https://blog.csdn.net/q646926099/article/details/76020603

---

如图：树结构，父子关系显示正常，但是所有的节点都是undefined。

四、JS转换函数

 //----------------------------------------tree异步加载---------------------------------------
	   $("#tt").tree({
		    method:"post",
		    url:'queryTree',//controller方法
		    //------------------------------------
		    loadFilter : function(rows) {
				return convert(rows);
			}
			//------------------------------------
		});
//------------------------------------------转换函数------------------------
	function exists(rows, parentId){
		for(var i=0; i<rows.length; i++){
			if (rows[i].id == parentId) return true;
		}
		return false;
	}
	
	var nodes = [];
	// get the top level nodes
	for(var i=0; i<rows.length; i++){
		var row = rows[i];
		if (!exists(rows, row.parentId)){
			nodes.push({
				id:row.id,
				//----------------注意这里，官方原文是text:row.name--------------------
				text:row.text
			});
		}
	}
	
	var toDo = [];
	for(var i=0; i<nodes.length; i++){
		toDo.push(nodes[i]);
	}
	while(toDo.length){
		var node = toDo.shift();	// the parent node
		// get the children nodes
		for(var i=0; i<rows.length; i++){
			var row = rows[i];
			if (row.parentId == node.id){
				var child = {id:row.id,text:row.text};
				if (node.children){
					node.children.push(child);
				} else {
					node.children = [child];
				}
				toDo.push(child);
			}
		}
	}
	return nodes;
}

排查问题：

---

1.检查后台controller返回值问题---------------无误

如图所示，使用的是ResponseBody返回一个Tree组件支持的Bean类型的list。通过在浏览器查看response，发现有json数据。如图：

2.检查数据库设计及Bean设计问题---------------无误

---

异步Tree对数据格式有要求，至少包含id，parentId，text，state等。
id：节点id
parentId:用来关联是否有父节点
text：叶节点显示内容
state：节点状态，叶节点默认是open或null

数据库设计如图：

Bean设计：

3.继续检查前台JS---------------发现问题

---

通过debugger调试，发现个奇怪的现象， Tree有id，没有text，所以造成所有的显示是undefined。
还记得前面提到的转换函数吗？官方这个函数中，有两个参数，一个是id，一个是name。 id对应的是表中的id，而name对应的是text,问题就出现在这里！！！将参数和数据库字段对应就好了。

结果:

---

后记：本文是使用异步Tree过程中，碰到的一个问题，希望对碰到同样问题的朋友有些许帮助。