在做网站时经常会有需要从后台获取目录结构的情况,而后台经常发过来的数据都是父目录和子目录混在一起的,这就需要我们前端自己处理了。
源数据一般都会有数据主键字段、父类主键字段及其他数据字段组成。我们只要封装一个方法就可以随意取用。源码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var needjson = [ { "id": 2, "parentid": 0, "name": "单据" }, { "id": 401, "parentid": 0, "name": "库存" }, { "id": 402, "parentid": 0, "name": "经营" }, { "id": 1, "parentid": 0, "name": "信息" }, { "id": 2002, "parentid": 1, "name": "往来单位" }, { "id": 2009, "parentid": 2, "name": "付款单" }, { "app_id": 5, "id": 2003, "parentid": 1, "name": "仓库信息" }, { "id": 2010, "parentid": 2, "name": "收款单" }, { "id": 2001, "parentid": 1, "name": "商品信息" }, { "id": 2008, "parentid": 2, "name": "销售退货单" }, { "id": 2005, "parentid": 1, "name": "职员信息" }, { "id": 2007, "parentid": 2, "name": "销售出库单" }, { "id": 2006, "parentid": 1, "name": "部门信息" }, { "id": 3000, "parentid": 2006, "name": "部门三级" }, { "id": 3001, "parentid": 2006, "name": "部门三级二" }, { "app_id": 5, "id": 3002, "parentid": 2006, "name": "部门三级三" }, { "id": 2004, "parentid": 1, "name": "地区信息" }]; function getTreeData(data,idField, parentidField, result) { //data:源数据 idField:数据主键在源数据中的字段名 parentidField:父目录主键在源数据中的字段名 result:结果数组中子目录的key名 // 删除 所有 children,以防止多次调用 for (var i=0;i<data.length;i++) { delete data[i][result]; } // 将数据处理成 idField 为 KEY 的 json数据 var jstemp = {}; for (var j=0;j<data.length;j++) { jstemp[data[j][idField]] = data[j]; } var val = []; for(var k=0;k<data.length;k++){ var parent = jstemp[data[k][parentidField]]; if (parent) { (parent[result] || ( parent[result] = [] )).push(data[k]); }else{ val.push(data[k]); } } return val; } console.log(getTreeData(needjson,"id","parentid",'child')) </script> </body> </html>
ok,完美解决!