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

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

直接来个无限级分类的代码吧。

Javascript 版本

<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就行了。
首页
-首页
–首页
首页

搞代gaodaima码

就是根据ID找归类，直接JQ判断记载就好了

不邀自答,(考虑性能)私以为在数据根源入手是最有效直接的,来个数据库版的.
建表语句

<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 namefrom tp_citystart with id<0 connect by parentId=prior Id;</code>

返回结果如下:

我们也可以这样写:

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

返回结果是:

喜欢 (0)赏

[搞代码]

分享 (0)