JS对象数组的递归排序(二十四)

古语有云: 万恶淫为首，百善孝为先。 我们后辈当自勉。

上一章简单介绍了JS数组的交并差补运算(二十三),如果没有看过,​​请观看上一章​​。

一. 对象数组的递归排序

在项目开发中，老蝴蝶常常遇到这样的问题， 后端返回一个对象集合，如权限的表， 有 id,parentId,name 这样的自身关联的表， 在后端查询时，查询出来了一些数据，但是这些数据通常是错综复杂的，排序并不明显。 在Oracle 数据库中，可以通过 start with … connect by …语句来进行查询，但是在MySQL数据库中没有这样的用法。 所以，有时候，前端排序也是非常重要的。 这个方法，就是通过 子与父之间的联系，进行相应的排序， 需要id,parentId 这样的字段来进行指定，不需要级别来指定。 如果没有父的话，那么parentId=0,或者是空。

如一个权限表:

后端返回给前端的数据格式是，

太多，老蝴蝶这儿就简单截个屏两个了。

在表格中，用的是bootstrap-table 表格，响应的结果是：

function handleClientData(res){
  var privilegeList=res.privilegeList?res.privilegeList:[];
  return privilegeList;
}

发现，这种展示方式很明显是不可以的。

可以通过一个方法，将响应的对象数组进行改变一下。

二. 通过递归，排序出新的集体。

方法中所用的 Map, 即new Map(), 并不是 JS的Map,而是老蝴蝶找的Map. 关于Map的内容，可以看老蝴蝶以前写的文章: ​​JS的Map详细形式(十八)
​

深复制 DeepCopy() ，也可以参考老蝴蝶以前写的文章: ​​JS的数组和对象深层拷贝(二十一)​​

/**
 * 
 * @param data 要排序的对象数组
 * @param idName id的编号名称
 * @param pIdName 父级的编号名称
 */
function listToTree(data,idName,pIdName){
  //最后结果的集合
  var resultData=[];
  //存储 父下面的所有的子的集合。 key为父，value为子的集合。
  var parentMap=new Map();

  //存储第一级别，即刚开始的那个集合。
   var firstLevelData=[];
   
  //2。 为了避免造成对原来数据的干扰，进行一个深度的Copy.
  var resultDeepList=deepCopy(data);
  
  $.each(resultDeepList,function(idx,item){
    var oldItem=item;
    if(!item[pIdName]){  //为空,或者值是0时，设置成-1.
      item[pIdName]=-1; 
    }
    //放置父级
    if(parentMap.containsKey(item[pIdName])){
      parentMap.get(item[pIdName]).push(oldItem);
    }else{
      var arr=new Array();
      arr.push(oldItem);
      parentMap.put(item[pIdName],arr);
    }
    //取出第一级别的那些集合。
    
    if(item[pIdName]==-1){
      firstLevelData.push(oldItem);
    }
  })
  diGuiTree(resultData,firstLevelData,parentMap,idName);
  
  return resultData;
}

function diGuiTree(resultData,data,parentMap,idName){ //放置过来的，是每一个的树。
  if(data!=null&&data.length>0){
    for(var i=0,length=data.length;i<length;i++){  
      var single=data[i];
      resultData.push(single);
      //看是否有子级。
      if(parentMap.get(single[idName])){ //有子级
        var sonList=parentMap.get(single[idName]);
        if(sonList&&sonList.length>0){
          diGuiTree(resultData,sonList,parentMap,idName);
        }
      }
    }
    
  }
}

三. 响应时，调用新方法

写好了这个方法，在响应时进行调用。

function handleClientData(res){
  var privilegeList=res.privilegeList?res.privilegeList:[];
  //return privilegeList; //以前的调用形式
  var resultData=listToTree(privilegeList,"id","parentid");
  return resultData;
}

刷新表格，展示:

四. 补充

展示有层次，是因为对 name那一列进行了设置样式。

<th data-field="name" data-align="center" data-cell-style="nameCellStyle">名称</th>

function nameCellStyle(value,row,index,field){
  var level=row.level;
  return {
    css:{
       "text-align":'left !important',
      "padding-left":(level*40)+"px"
    }
  }
}

谢谢!!!