简单实现ztree树节点懒加载

洛阳醉长安行

当开发中在实现有树结构的需求时,相信大家都知道如果一次性的把树的所有数据都请求回来再进行渲染是不太好的,因为用户也许只需要某一节点的数据,其他的数据他不需要,获取所有数据就会造成请求慢、和渲染慢的问题,那就需要实现树懒加载功能进行优化。

这篇文章介绍如何使用ztree进行树的懒加载:

先通过后端获取到树结构的数据,然后利用数据初始化一个树(当然是只有一层的), data是请求拿回来的数据,配置懒加载时请求的接口和参数

    var setting = {
      async: {
        //启用异步加载节点
        enable: true,
        url: "tree/list",
        autoParam: ["id"], //自动带上点击节点的id
        headers: { ticket: sessionStorage.getItem("ticket") },
        contentType: "application/json; charset=UTF-8",
        dataFilter: function () {}, //防止undefined节点 bug
      },
      data: {
        simpleData: {
          enable: true,
        },
      },
      view: {
        expandSpeed: 200,
      },
      callback: {
        beforeExpand: beforeExpand,
        onAsyncSuccess: onAsyncSuccess,
        onAsyncError: onAsyncError,
      },
    };

 var zTree = $.fn.zTree.init($("#tree"), setting, data);

然后添加对应的回调函数:当懒加载请求完成后去动态添加下级节点zTree.addNodes

 var zTree = $.fn.zTree.init($("#tree"), setting, res.data);

    var setting = {
      async: {
        //启用异步加载节点
        enable: true,
        url: "tree/list",
        autoParam: ["id"], //自动带上点击节点的id
        headers: { ticket: sessionStorage.getItem("ticket") },
        contentType: "application/json; charset=UTF-8",
        dataFilter: function () {}, //防止undefined节点 bug
      },
      data: {
        simpleData: {
          enable: true,
        },
      },
      view: {
        expandSpeed: 200,
      },
      callback: {
        beforeExpand: beforeExpand,
        onAsyncSuccess: onAsyncSuccess,
        onAsyncError: onAsyncError,
      },
    };

    function beforeExpand(treeId, treeNode) {
      if (!treeNode.isAjaxing) {
        //在加载中
        treeNode.icon = "./zTree_v3/css/zTreeStyle/img/loading.gif";
        zTree.reAsyncChildNodes(treeNode, "refresh", true);
        treeNode.icon = "";
        return true;
      } else {
        layer.msg("正在加载数据中,请稍后展开节点");
        return false;
      }
    }

    function onAsyncSuccess(event, treeId, treeNode, res) {
      ajaxGetNodes(parseTree(JSON.parse(res).data), treeNode);
    }

    function onAsyncError(
      event,
      treeId,
      treeNode,
      XMLHttpRequest,
      textStatus,
      errorThrown
    ) {
      layer.msg("异步获取数据出现异常");
      treeNode.icon = "";
      zTree.updateNode(treeNode);
    }
    function ajaxGetNodes(treeNodeArr, currtNode) {
      zTree.addNodes(currtNode, 0, treeNodeArr, false);
    }

    //过滤节点列表
    function parseTree(data) {
      data.forEach(function (val) {
        if (val.isLeaf != 1) {
          val.isParent = true;
          val.open = true;
        } else {
          val.isParent = false;
          val.open = false;
        }
      });
      return data;
    }
阅读 1.6k

charging...

27 声望
2 粉丝
0 条评论

charging...

27 声望
2 粉丝
文章目录
宣传栏