javascript - 다음 배열을 기반으로 3단계 연결 메뉴 트리를 생성하는 방법은 무엇입니까? (성능을 고려)

첫 번째 수준 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 }]

<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>

효과는 사진과 같습니다

글이 좀 보기 흉하지만 배열 정렬에만 국한되지 않으며(내림차순일 필요는 없음) 레벨 3에만 국한되지도 않습니다.

사실 이는 재귀 관계입니다. 내 프로젝트에 코드를 게시하세요.

<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>

무한분류 코드만 만들어보세요.

자바스크립트 버전

<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>

최종 출력 효과는 다음과 같습니다.

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

PS: 구분선은 사용자 정의할 수 있습니다. 최적화를 위해 합격 전문가에게 도움 요청: arrayToTree() ^_^

PHP 버전

이전에 쓴 적이 있는데 여기를 클릭하세요. 복사하기가 너무 귀찮습니다 _^_.

성능이 매우 염려되는 경우에는 규모가 크지 않으므로 레벨 3 연계를 사용하지 않는 것을 고려하여 처리한 후 다음 Option을 입력하면 됩니다.
집
-집
--집
집

ID를 기준으로 분류를 찾고, JQ를 이용해서 기록을 판별하면 됩니다

답변을 요청하지 않았습니다. (성능을 고려하여) 데이터 소스에서 시작하는 것이 가장 효과적이고 직접적이라고 생각합니다. 여기 데이터베이스 버전이 있습니다.
Create table 문

<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>

예를 들어 Oracle의 계층적 쿼리를 사용하세요

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

반환된 결과는 다음과 같습니다.

다음과 같이 쓸 수도 있습니다.

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

반환 결과는 다음과 같습니다.