ztree异步加载

ZTree异步加载实践

最新推荐文章于 2021-11-26 15:43:08 发布

可能会成为大V

最新推荐文章于 2021-11-26 15:43:08 发布

阅读量393

点赞数

CC 4.0 BY-SA版权

文章标签： ztree j

本文链接：https://blog.youkuaiyun.com/x111111y/article/details/80667225

本文介绍如何使用ZTree插件实现异步加载数据，并展示了具体的配置方法与代码实例。通过设置异步加载路径和参数，可以自动创建子节点并添加到父节点下，简化了开发流程。

1.配置好参数


var setting = {

  ztreeSetting:{

    view:{

    showIcon: false //前面文件夹显示状态

  },

  data:{

    key:{

      name:"MC" //数据结构的属性由name改成MC

    }

  },

  async:{

    enable: true,

    url: url,//异步加载时的请求地址

    otherParam: {"code":data},//提交参数

    dataFilter: ajaxDataFilter //点击请求后的数据，返回展示的属性

    }

  }

};

var ztreeData = [{MC: "1111111111111111111", BM: "2222222222222222222", isParent: true}]

function ajaxDataFilter(treeId, parentNode, responseData){
  return responseData.data
}

2.html代码，只需要给标签加一个id即可。

3.初始化

$.fn.zTree.init($("#treeDemo"), setting, ztreeData )

以上则是所有代码，实现异步加载的时候不需要手动写方法来循环数据创造子节点添加到相应的父节点。配置好异步加载的路径，以及需要传的参数。自动实现异步加载。

异步加载后的数据可能存在其他的属性，需要自己转，调用ajaxDataFilter，返回循环的属性即可。so eazy，