美文网首页
mui 侧栏菜单实现多级树数据列表,返回上一级树

mui 侧栏菜单实现多级树数据列表,返回上一级树

作者: 洛阳醉长安行 | 来源:发表于2020-11-14 17:55 被阅读0次
    var currtTreeArr = []; //当前树列表数组
    var treeData = []; //根节点数据
    var treeHistoryArr = []; //历史打开的树,用于回退,进入到其他节点
    $(".mui-table-view").on("click", ".mui-navigate-right", function () { //列表冒泡监听点击
      var idx = $(this).attr("index");
      if (currtTreeArr[idx].children.length) {
        //把点击项的子树显示出来,并添加当前点击的子树到历史
        currtTreeArr = currtTreeArr[idx].children;
        treeHistoryArr.push(currtTreeArr);
        renderTree(currtTreeArr);
      } else {
        renderLeafNode(currtTreeArr[idx].id); //叶子节点
      }
    });
    
    //渲染树结构列表
    function renderTree(data) {
      if (treeHistoryArr.length > 1) {
        $("#goback").show(); //显示返回上一级按钮
      } else {
        $("#goback").hide();
      }
      var dom = "";
      data.forEach(function (item, idx) {
        dom +=
          ' <li class="mui-table-view-cell"><a class="mui-navigate-right" index=' +
          idx +
          ">" +
          item.name +
          "</a></li>";
      });
      $(".mui-table-view").empty().html(dom);
    }
    
    //显示树
    function showTreeList() {
      treeHistoryArr = [];
      currtTreeArr = [{ //获取到的树数据
        name: '根节点',
        id: 1,
        children: [{
          name: '一级1',
          id: 11,
          children: [...]
        }, {
          ...
        }]
      }, ...];
      renderTree(currtTreeArr);
      treeHistoryArr.push(currtTreeArr);
      mui(".mui-off-canvas-wrap").offCanvas("show");
    }
    
    function renderLeafNode(id) {
      ...叶子节点的渲染
    }
    

    相关文章

      网友评论

          本文标题:mui 侧栏菜单实现多级树数据列表,返回上一级树

          本文链接:https://www.haomeiwen.com/subject/oclbbktx.html