javascript - 根據下面數組怎麼產生三級聯動菜單樹？（考慮效能）

一級Id為負數、parentId為空白，二級parentId等於一級id，三級parentId等於二級id
[{"name": "廣東","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "廣州","Id": 44,"parentId": -1},
{"name": "武漢","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白雲","Id": 741,"parentId": 44}]

回複內容：

一級Id為負數、parentId為空白，二級parentId等於一級id，三級parentId等於二級id
[{"name": "廣東","Id": -1,"parentId": null},
{"name": "湖北","Id": -2,"parentId": null},
{"name": "廣州","Id": 44,"parentId": -1},
{"name": "武漢","Id": 58,"parentId": -2},
{"name": "深圳","Id": 12,"parentId":-1 },
{"name": "白雲","Id": 741,"parentId": 44}]

效果

寫的有點難看，不過不受限於數組的排序（不一定要按照級數遞減），也不受限於3級。

其實這也就是一個遞迴的關係，貼下我項目中的代碼吧：

    /**     * 擷取樹的樹形的下拉式清單數組     * @param string $model 模型名稱     * @param int $m 點位符數量     * @param string $pid 父級id     * @param array field 欄位名的數組     */    function dropdown_tree($model,$m=0,$pid=0,$field=array('id','sortname','parentid'))    {            $model=$model."_model";        $this->_CI->load->model($model);        $class_arr=$this->_CI->$model->all();        $return_arr=array();        $this->dropdown_array($m,$pid,$class_arr,$return_arr,$field);        return $return_arr;    }   /**    * 遍曆數組，修改其樣式。    */    function dropdown_array($m,$pid,$class_arr,&$return_arr,$field){        $n = str_pad('',$m,'-',STR_PAD_RIGHT);        $n = str_replace("-","      ",$n);        foreach($class_arr as $item){            if($item["$field[2]"]==$pid){                $return_arr[$item["$field[0]"]]=$n."|--".$item["$field[1]"];                $this->dropdown_array($m+1,$item["$field[0]"],$class_arr,$return_arr,$field);            }        }    }

直接來個無限級分類的代碼吧。

Javascript 版本

    var districts = [        {"name": "廣東", "Id": 1, "parentId": 0},        {"name": "湖北", "Id": 2, "parentId": 0},        {"name": "廣州", "Id": 3, "parentId": 1},        {"name": "武漢", "Id": 4, "parentId": 2},        {"name": "深圳", "Id": 5, "parentId": 0},        {"name": "白雲", "Id": 6, "parentId": 3},        {"name": "江夏", "Id": 7, "parentId": 4},        {"name": "景雲路", "Id": 8, "parentId": 6}    ];        function arrayToTree(parentId) {        var temp = [];        for (var index in districts) {            if (districts[index].parentId == parentId) {                temp.push({                    data: districts[index],                    children: arrayToTree(districts[index].Id)                });            }        }        return temp;    }    function outputTree(items, depth) {        var str = '';        for (var index in items) {            /* repeat() 特性屬於 ECMAScript 2015（ES6）規範 */            str += ' - - '.repeat(depth) + items[index].data.name + '
';            if (items[index].children.length) {                str += outputTree(items[index].children, depth + 1);            }        }        return str;    }    var result = outputTree(arrayToTree(0), 0);    document.write(result);

最終輸出效果如下：

廣東- - 廣州- - - - 白雲- - - - - - 景雲路湖北- - 武漢- - - - 江夏深圳

PS：分隔字元可以自訂。求路過大牛幫忙最佳化：arrayToTree() ^_^

PHP 版本

以前寫過，請直接戳這裡，懶得複製了 _^_。

非常在意效能的話這種因為數量級不大可以考慮不用3級聯動，加工一下，然後輸入如下的Option就行了。
首頁
-首頁
--首頁
首頁

就是根據ID找歸類，直接JQ判斷記載就好了

不邀自答,(考慮效能)私以為在資料根源入手是最有效直接的,來個資料庫版的.
建表語句

create table TP_CITY(  Id      NUMBER ,  name    VARCHAR2(255),  parentId    NUMBER);insert into tp_city values(-1,'廣東', null);insert into tp_city values(-2,'湖北', null);insert into tp_city values(44,'廣州', -1);insert into tp_city values(58,'武漢', -2);insert into tp_city values(12,'深圳', -1);insert into tp_city values(741,'白雲', 44);

比如使用oracle的層級查詢

select lpad(' ', (level-1)*2, ' ')||name namefrom tp_citystart with id<0 connect by parentId=prior Id;

返回結果如下:

我們也可以這樣寫:

select sys_connect_by_path(name, '-') pathfrom tp_citystart with id<0 connect by parentId=prior id;

返回結果是:

