动态生成树形结构（联级） 面包屑 递归

前言

动态生成树形结构（联级） 面包屑 递归

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.html

代码如下（示例）：

 <div class="xuanze">
           <button class="btn">选择型号</button>
           <div class="bread">选择型号</div>
           <ul id="xinghao" class="xing"></ul>
  </div>

2.js

代码如下（示例）：

$(function () {
    function ss(iy) {

        $.ajax({
            type: "get",
            url: "../js/dome.json",
            dataTypr: "json",
            success: function (res) {
                dataList(res.data)
            }
        })
        var obj = [];
        function dataList(res) {
            var res = res;
            var result = recurz(res);
            function recurz(dataList) {
                for (var i = 0; i < dataList.length; i++) {
                    result = dataList[i];
                    obj.push({
                        name: result.name,
                        id: result.id,
                        pid: result.pid,
                        level: result.level,
                    })
                    var children = result.hasOwnProperty("children")
                    if (children == true) {
                        recurz(result.children);
                    }
     
                return obj;



            }
            console.log(obj);
   
            getLi(obj, obj[0].pid, iy);
        }
    }



    var ul = document.querySelectorAll('.xing')
    // console.log(ul);
    var bread = document.querySelectorAll('.bread')
    function getLi(data, pid, ii) {
        console.log(ii);
        ul[ii].innerHTML = ''   // 清空原来的结果
        // 遍历数组
        console.log(data);
        var index = ii
        for (var i = 0; i < data.length; i++) {
           
            if (data[i].pid == pid) {
           
                var li = document.createElement('li')
                // console.log(data[i].id);
                li.setAttribute('data-id', data[i].id)
                li.setAttribute('data-level', data[i].level)
                li.innerText = data[i].name
      
                ul[index].appendChild(li)
            }
        }

        var lis = document.querySelectorAll('ul li')
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                console.log(index);
                //    bread[1].innerHTML += '>> <a href="" data-id="' + this.getAttribute('data-id') + '" data-level="' + this.getAttribute('data-level') + '">' + this.innerText + '</a>'
                console.log(this.getAttribute('data-id'));
                var a = document.createElement("a")
                a.setAttribute("data-id", this.getAttribute('data-id'))
                a.setAttribute("data-level", this.getAttribute('data-level'))
                a.innerText = ">>" + this.innerText
                bread[index].appendChild(a)
                getLi(data, this.getAttribute('data-id'), index)
            }
        }

        var aes = document.querySelectorAll('.bread>a')

        for (var i = 0; i < aes.length; i++) {
            aes[i].onclick = function (e) {
                e.preventDefault()

                var level = this.getAttribute('data-level')

                console.log(level, aes)

                // 清空原来的面包屑
                bread[index].innerHTML = '选择型号'

                // level代表a的层级数量
                for (var j = 0; j < level; j++) {
                 '
                    var a = document.createElement("a")
                     a.setAttribute("data-id", aes[j].getAttribute('data-id'))
                     a.setAttribute("data-level", aes[j].getAttribute('data-level'))
                     a.innerText =  aes[j].innerText
                     bread[index].appendChild(a)
                }
                level++

                getLi(data, this.getAttribute('data-id'),index)
            }

        }
    }

    $(".xuanze").on("click", ".btn", function () {
    
        var index = $(".btn").index(this)
        console.log(index);
        ss(index)
        $(".xinghao").removeClass("xinghao")
        console.log($(".xing"));
        console.log($(".bread"));
        $(".xing").eq(index).addClass("xinghao")
        $(".bread").eq(index).addClass("xinghao")

    })
 })

该处使用的url网络请求的数据。

---

3.效果

总结

点击上面的面包屑可以跳对应的层级
以上就是今天要讲的内容，本文仅仅简单介绍了面包屑与联级，希望大家可以多给建议