javascript - Wie erstelle ich einen dreistufigen Verknüpfungsmenübaum basierend auf dem folgenden Array? (Leistung berücksichtigen)

Die ID der ersten Ebene ist eine negative Zahl, die ParentId ist leer, die ParentId der zweiten Ebene ist gleich der ID der ersten Ebene und die ParentId der dritten Ebene ist gleich der ID der zweiten Ebene
[ {"name": "Guangdong", "Id": -1, "parentId": null},
{"name": "Hubei", "Id": -2, "parentId": null},
{"name": "Guangzhou", "Id": 44, "parentId": -1},
{"name": "Wuhan", "Id": 58, "parentId": -2} ,
{"name": "Shenzhen","Id": 12 ,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44 }]

Antwortinhalt:

Die ID der ersten Ebene ist eine negative Zahl, die ParentId ist leer, die ParentId der zweiten Ebene ist gleich der ID der ersten Ebene und die ParentId der dritten Ebene ist gleich der ID der zweiten Ebene
[ {"name": "Guangdong", "Id": -1, "parentId": null},
{"name": "Hubei", "Id": -2, "parentId": null},
{"name": "Guangzhou", "Id": 44, "parentId": -1},
{"name": "Wuhan", "Id": 58, "parentId": -2} ,
{"name": "Shenzhen","Id": 12 ,"parentId":-1 },
{"name": "白云","Id": 741,"parentId": 44 }]

<code><div id="result"></div>
<script>
  var result = document.getElementById('result')
  var arr = [
    {"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}
  ]
  var tree = {}
  var count = 0
  array2Object(arr, tree, null)
  function array2Object (array, node, id) {
    var storage = []
    var newArray = []
    var newNode, newId
    for (var i = 0; i < array.length; i++) {
      if (array[i].parentId === id) {
        node[array[i].name] = {}
        storage.push(i)
        count++
      } else {
        newArray.push(array[i])
      }
    }
    if (count !== arr.length) {
      for (var i = 0; i < storage.length; i++) {
        array2Object(newArray, node[array[storage[i]].name], array[storage[i]].Id)
      }
    } else {
      object2Html(result, tree)
    }
  }
  function object2Html (node, obj) {
    var storage = []
    var tpl = node.innerHTML + '<ul>'
    for (var key in obj) {
      tpl = tpl + '<li data-name="' + key + '">' + key + '</li>'
      if (!isEmptyObject(obj[key])) {
        storage.push({
          name: key,
          obj: obj[key]
        })
      }
    }
    tpl += '</ul>'
    node.innerHTML = tpl
    if (storage.length !== 0) {
      for (var i = 0; i < storage.length; i++) {
        object2Html(document.querySelector('li[data-name="' + storage[i].name + '"]'), storage[i].obj)
      }
    }
  }
  function isEmptyObject (obj) {
    for (var key in obj) {
      return false
    }
    return true
  }
</script></code>

Der Effekt ist wie im Bild gezeigt

Das Schreiben ist etwas hässlich, aber es ist nicht auf die Sortierung des Arrays beschränkt (es muss nicht in absteigender Reihenfolge erfolgen) und auch nicht auf Ebene 3 beschränkt.

Tatsächlich ist dies eine rekursive Beziehung. Veröffentlichen Sie den Code in meinem Projekt:

<code>    /**
     * 获取树的树形的下拉列表数组
     * @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);
            }
        }
    }</code>

Überlegen Sie sich einfach einen Code für die unendliche Klassifizierung.

Javascript-Version

<code class="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 + '<br/>';
            if (items[index].children.length) {
                str += outputTree(items[index].children, depth + 1);
            }
        }
        return str;
    }

    var result = outputTree(arrayToTree(0), 0);
    document.write(result);</code>

Der endgültige Ausgabeeffekt ist wie folgt:

<code class="javascript">广东
- - 广州
- - - - 白云
- - - - - - 景云路
湖北
- - 武汉
- - - - 江夏
深圳</code>

PS: Der Separator kann individuell angepasst werden. Bitten Sie Passexperten um Hilfe zur Optimierung: arrayToTree() ^_^

PHP-Version

Ich habe es schon einmal geschrieben, bitte klicken Sie direkt hier, ich bin zu faul, es zu kopieren _^_.

Wenn Sie sich große Sorgen um die Leistung machen, da die Größenordnung nicht groß ist, können Sie erwägen, die Verknüpfung der Stufe 3 nicht zu verwenden, sie zu verarbeiten und dann die folgende Option einzugeben.
Home
-Home
--Home
Home

Suchen Sie einfach die Klassifizierung basierend auf der ID und verwenden Sie einfach JQ, um den Datensatz zu bestimmen

Nicht zur Beantwortung eingeladen, (in Anbetracht der Leistung) Ich denke, es ist am effektivsten und direktsten, an der Quelle der Daten zu beginnen, hier ist die Datenbankversion
Tabellenanweisung erstellen

<code>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);
</code>

Verwenden Sie beispielsweise die hierarchische Abfrage von Oracle

<code>select lpad(' ', (level-1)*2, ' ')||name name
from tp_city
start with id<0 connect by parentId=prior Id;</code>

Die zurückgegebenen Ergebnisse lauten wie folgt:

Wir können auch so schreiben:

<code>select sys_connect_by_path(name, '-') path
from tp_city
start with id<0 connect by parentId=prior id;
</code>

Das Rückgabeergebnis ist: