需求:
① 给定一个数组
② 数组中的每个元素均为树结构上的一个节点
③ 除root节点外,其他每个结点,均有一个字段,用于记录直接父节点的id
④ root节点以下的每个层次中,节点的数量不限
树结构如下图:
⑤ 要求实现: 将上述树状图中的每个节点作成下拉框中的一个option供用户进行选择,效果图如下:
实现代码:
/** * build all department options * * @param allDept * all department info */ function buildDept(allDept) { var res = ""; var idx; var rootDept = null; // find the root department for (idx = 0; idx < allDept.length; idx++) { if (allDept[idx].parent == null) { rootDept = allDept[idx]; break; } } // if the root department was found if (rootDept) { res += "<option value='" + rootDept.id + "'>" + rootDept.name + "</option>"; var loopedId = []; loopedId[loopedId.length] = rootDept.id; (function(node, level) { var idx; var deptTmp; for (idx = 0; idx < allDept.length; idx++) { deptTmp = allDept[idx]; if ($.inArray(deptTmp.id, loopedId) == -1) { if (deptTmp.parent.id == node.id) { loopedId[loopedId.length] = deptTmp.id; res += createDeptOption(deptTmp, level); arguments.callee(deptTmp, (level + 1)); } } } })(rootDept, 1); } return res; }
/** * create a option for a department * * @param node * a department node * @param level * the department level */ function createDeptOption(node, level) { var prefix = "|"; var sep = "-"; var option = "<option value='" + node.id + "'>" + prefix; var idx; for (idx = 0; idx < (2 * level - 1); idx++) { option += sep; } option += node.name + "</option>"; return option; }
重点是上面第一个方法,我简要说明一下:
① 找出唯一的那个root节点。即没有父节点的那个节点。通过“allDept[idx].parent == null”来判断即可。
② 从root结点开始,往叶子节点方向,递归查找每个节点。注意一下“ arguments.callee(deptTmp, (level + 1));”的用法,这个是关键。
PS:我这里使用了一个 loopedId 数组来将所有已经遍历过的储存起来,下次循环的时候,先判断一下有没有被遍历过,如果有的话,则跳过。 但是我觉得这个方法有点笨拙,可我一时又想不到其他方法。如果有哪位兄弟有好的解决方案的话,可以留一下言,谢谢!
以上只是拼凑 所有 option 的过程,要想放到某个select中的话,可以直接使用 JQuery 的 append 方法来实现,如: $("#selectID").append(str);