【金秋打卡】第24天 核心业务功能开发

课程名称：Spring Cloud+ Vue前后端分离开发企业级在线视频系统

课程章节：第7章  核心业务功能开发

讲师姓名：甲蛙老师

课程内容：

集成树形展示插件zTree：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

课程收获：

首先在zTree的首页中下载并添加到本机项目中，在index.html中引入css和js文件。

initTree() {
   let _this = this;
   let setting = {
     check: {
       enable: true
     },
     data: {
       simpleData: {
         idKey: "id",
         pIdKey: "parent",
         rootPId: "00000000",
         enable: true
       }
     }
   };

   let zNodes = _this.categorys;

   $.fn.zTree.init($("#tree"), setting, zNodes);
 }

 

创建 zTree 必须使用$.fn.zTree.init(obj,setting,zNodes);方法。

第一个参数obj：用于展现 zTree 的 DOM 容器，可以使用$(".ztree")获取dom元素；如果元素写为<div class="ztree" id="tree"></div>，也可以使用$("#tree")获取dom元素。

第二个参数setting：zTree的配置数据。

data：设置zTree的数据格式。simpleData：enable：true使用简单数据格式；

check：enable：true，每个节点显示多选框；

callback：onclick用于捕获节点被点击的事件回调函数。

第三个参数zNodes：zTree的节点数据，使用json数据格式。每个节点都有自己的编号id（每个都不同）；pId表示此节点的父节点是哪个。0表示没有父节点，1表示id为1的节点为此节点的父节点，即此节点会显示在id为1的节点下。name为节点名称。

总结：html文件中写zTree的容器并将容器样式 设置为class="ztree"；

js文件中设置setting：zTree的配置数据；zNodes：zTree的节点数据；

初始化zTree：$.fn.zTree.init($(".ztree"),setting,zNodes)。