这个是easy ui 中 tree 控件的使用的例子 http://www.jeasyui.net/tutorial/57.html
为了展示树,所需要的数据,在数据库中存储(线性结构、邻接表的方式),需要转换为树控件可用的,带层级的JSON的数据(附后)
这个转换过程中的 convert函数使用了javascript 中 变量的一个非常显著的特征:到底变量是引用还是赋值,下面逐行进行解读,并进行记录
先说结论:JS中对基本类型的赋值那就是赋值,对于object类型(非基本类型)所有的赋值(包括 push函数)全部为引用。
function convert(rows){
// 功能函数,没特殊的
function exists(rows, parentId){
for(var i=0; i<rows.length; i++){
if (rows[i].id == parentId) return true;
}
return false;
}
// 故事从它这里开始
// nodes这个数组是最后的返回值
// 这段代码是找出所有的顶级节点:所有父亲节点不在完整列表中的为顶级节点(也就是找不到父亲的)
var nodes = [];
// get the top level nodes
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (!exists(rows, row.parentId)){
// 这里的 push 是赋值不是引用,除了这里操作了 nodes[] 数组,下面的代码没有任何地方直接使用nodes[]数组
nodes.push({
id:row.id,
text:row.name
});
}
}
// 这里的 toDo 是开辟了新的存储空间的用来存放数据
var toDo = [];
for(var i=0; i<nodes.length; i++){
// 这里push的元素为 nodes中的元素的引用
// 这里没有做 toDo = nodes,所以即使是保存的有 nodes中元素的引用,toDo 是一个独立的数组,toDo不是nodes的引用
toDo.push(nodes[i]);
}
while(toDo.length){
// 删除了首个元素,将nodes中的引用从toDo数组中删除了,返回值为被删除的节点
// node 变量 为 nodes 数组的引用,所以才能改变了notes[]数组的值!!!!
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.name};
if (node.children){
// 这里是赋值,改变了notes[]数组
node.children.push(child);
} else {
// 这里是赋值,改变了notes[]数组
node.children = [child];
}
//这里添加的是引用
toDo.push(child);
}
}
}
return nodes;
}
[
{"id":1,"parendId":0,"name":"Foods"},
{"id":2,"parentId":1,"name":"Fruits"},
{"id":3,"parentId":1,"name":"Vegetables"},
{"id":4,"parentId":2,"name":"apple"},
{"id":5,"parentId":2,"name":"orange"},
{"id":6,"parentId":3,"name":"tomato"},
{"id":7,"parentId":3,"name":"carrot"},
{"id":8,"parentId":3,"name":"cabbage"},
{"id":9,"parentId":3,"name":"potato"},
{"id":10,"parentId":3,"name":"lettuce"}
]
[
{
"id": 1,
"parendId": 0,
"name": "Foods",
"children": [
{
"id": 2,
"parentId": 1,
"name": "Fruits",
"children": [
{
"id": 4,
"parentId": 2,
"name": "apple"
},
{
"id": 5,
"parentId": 2,
"name": "orange"
}
]
},
{
"id": 3,
"parentId": 1,
"name": "Vegetables",
"children": [
{
"id": 6,
"parentId": 3,
"name": "tomato"
},
{
"id": 7,
"parentId": 3,
"name": "carrot"
},
{
"id": 8,
"parentId": 3,
"name": "cabbage"
},
{
"id": 9,
"parentId": 3,
"name": "potato"
},
{
"id": 10,
"parentId": 3,
"name": "lettuce"
}
]
}
]
}
]