javascript、php實現無限級分類的兩種方式

javascript、php實現無限級分類的兩種方式

作者：Lee_吉 2018-06-30 來源：51CTO

I、php： 一、梯式：

1. 代碼：

   /*
   @desc：獲取梯式分類
   @param data 需要轉換的數據
   @param pkey 上級的鍵名
   @param key 主鍵名
   @param pid 頂級id
   @param level 起始層級 默認0
   @return ret 轉換後的數組
   */
   function getleveltree($data,$pkey,$key,$pid = 0,$level = 0){
   $ret = array();
   foreach ($data as $v){
       if($v[$pkey] == $pid){
           $v['level'] = $level;
           $ret[] = $v;
           $ret = array_merge($ret,getleveltree($data,$pkey,$key,$v[$key],$level+1));
       }
   }
   return $ret;
   }

2. 測試：

   $data = array(
       array(
           'id' => 1,
           'pid' => 0
       ),
       array(
           'id' => 2,
           'pid' => 1
       ),
       array(
           'id' => 3,
           'pid' => 2
       )
   );
   $ret = getleveltree($data,'pid','id');
   var_dump($ret);

3. 輸出：

   array(3) {
   [0]=>
   array(3) {
   ["id"]=>
   int(1)
   ["pid"]=>
   int(0)
   ["level"]=>
   int(0)
   }
   [1]=>
   array(3) {
   ["id"]=>
   int(2)
   ["pid"]=>
   int(1)
   ["level"]=>
   int(1)
   }
   [2]=>
   array(3) {
   ["id"]=>
   int(3)
   ["pid"]=>
   int(2)
   ["level"]=>
   int(2)
   }
   }

   二、裂變式：
4. 代碼：

   /*
   @desc：獲取裂變式分類
   @param data 需要轉換的數據
   @param pkey 上級的鍵名
   @param key 主鍵名
   @param pid 頂級id 默認0
   @return ret 轉換後的數組
   */
   function getsubtree($data,$pkey,$key,$pid = 0) {
   $ret = array();
   foreach ($data as $v){
       if($v[$pkey] == $pid){
           $v['child'] = getsubtree($data,$pkey,$key,$v[$key]);
           $ret[] = $v;            
       }
   }
   return $ret;
   }

5. 測試：

   $data = array(
       array(
           'id' => 1,
           'pid' => 0
       ),
       array(
           'id' => 2,
           'pid' => 1
       ),
       array(
           'id' => 3,
           'pid' => 2
       )
   );
   $ret = getsubtree($data,'pid','id');
   var_dump($ret);

6. 輸出：

   array(1) {
   [0]=>
   array(3) {
   ["id"]=>
   int(1)
   ["pid"]=>
   int(0)
   ["child"]=>
   array(1) {
     [0]=>
     array(3) {
       ["id"]=>
       int(2)
       ["pid"]=>
       int(1)
       ["child"]=>
       array(1) {
         [0]=>
         array(3) {
           ["id"]=>
           int(3)
           ["pid"]=>
           int(2)
           ["child"]=>
           array(0) {
           }
         }
       }
     }
   }
   }
   }

   II、javascript： 一、梯式：
7. 代碼：

   /*
   @desc：獲取梯式分類
   @param data 需要轉換的數據
   @param pkey 上級的鍵名
   @param key 主鍵名
   @param pid 頂級id
   @param level 起始層級 默認0
   @return ret 轉換後的數組
   */
   function getleveltree(data,pkey,key,pid = 0,level = 0){
   var ret = new Array()
   for (var i in data){
       if(data[i][pkey] == pid){
           data[i]['level'] = level
           ret.push(data[i])
           ret = ret.concat(getleveltree(data,pkey,key,data[i][key],level + 1))
       }
   }
   return ret
   }

8. 測試：

   var data = new Array(
       {
           'id':1,
           'pid':0
       },
       {
           'id':2,
           'pid':1
       },
       {
           'id':3,
           'pid':2
       }
   )
   var ret = getleveltree(data,'pid','id')
   console.log(ret)

9. 輸出：

   [ { id: 1, pid: 0, level: 0 },
   { id: 2, pid: 1, level: 1 },
   { id: 3, pid: 2, level: 2 } ]

   二、裂變式：
10. 代碼：

    /*
    @desc：獲取裂變式分類
    @param data 需要轉換的數據
    @param pkey 上級的鍵名
    @param key 主鍵名
    @param pid 頂級id 默認0
    @return ret 轉換後的數組
    */
    function getsubtree(data,pkey,key,pid = 0) {
    var ret = new Array()
    for (var i in data){
        if(data[i][pkey] == pid){
            data[i]['child'] = getsubtree(data,pkey,key,data[i][key])
            ret.push(data[i])
        }
    }
    return ret
    }

11. 測試：

    var data = new Array(
        {
            'id':1,
            'pid':0
        },
        {
            'id':2,
            'pid':1
        },
        {
            'id':3,
            'pid':2
        }
    )
    var ret = getsubtree(data,'pid','id')
    console.log(ret)

12. 輸出：

    [ { id: 1, pid: 0, child: [ [Object] ] } ]