欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

vue如何利用树形控件z-tree动态添加数据

程序员文章站 2022-03-29 08:21:00
...
本篇文章给大家分享的是关于vue如何利用树形控件z-tree动态添加数据,内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家。

环境:vue 2.9.3; webpack;

插件:z-tree,jquery(cnpm install xxxx)

问题;由于数据量比较多,需要动态加载数据,默认第一次请求的数据是最高一级,然后子集都是空。

目标:点击第一级查询当前父节点的子集,并展开父节点下面的子节点。

实现方式:el-tree(element-ui里面的树形控件)、z-tree

el-tree

vue如何利用树形控件z-tree动态添加数据

使用这个方法可以获取当前点击节点的数据row,根据row的属性判断当前节点是不是父节点,如果是父节点就请求接口,在当前节点push子节点的数据,但是push的时候还是有点蛋疼,直接插入某个位置并不好操作,虽然最后还是实现了(添加的索引位置),但是并不适用,导致第一次点击父节点并不会直接展开,因为第一次是请求数据,所以不会展开,第二次点击就会展开,因为数据已经push进去了,但是很显然不行,很不人性化。

我不知道是我处理的方式不对还是咋的,鉴于时间,我也没有细致看el-tree的动态加载数据,所以跳过这里。

z-tree

引入z-tree和样式

import  'ztree'import 'ztree/css/metroStyle/metroStyle.css'import $ from 'jquery'

配置信息

shuyusetting:{
          view: {
            showLine: false
          },
          data: {
            simpleData: {
              enable: true
            }
          },
          callback: {
            onClick: this.shuyuOnClick,  //点击函数
            onExpand: this.shuyuOnExpand, // 展开内容          }
        },

引用z-tree

 <p  style="cursor: pointer;min-height: 200px; max-height:300px; overflow-y: auto" >
       <ul id="shuyuSelect" class="ztree"    style=" width: 230px; height: 30%;overflow:auto;cursor: pointer; " ></ul>  // 注意id,下面需要用到id
   </p>

初始化控件,显示最*数据      var params=new Object();

this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {
headers: {
'X-AUTH-TOKEN': this.token
}
}).then((res) => {
var data = JSON.parse(res.data);
//console.log(data);
if (!!data&&data.status=="1") {
$.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);  // 初始化数据 id需要和上面一样 第二个是配置信息 第三个是顶层的数据

// console.log(this.knowledgetreedata);
} else {
return false;
}
}, (err) => {
console.log(err);
});

接下来是两个对应配置的函数

    shuyuOnClick(event, treeId, treeNode){
        if(!treeNode.isParent){   // 判断当前节点不是父级节点 //根据自己的数据来 
          var acknowledgeid = treeNode.id;
          var params= {id:acknowledgeid};
          this.$http.post(this.ip+'/xhhms/rest/interRemoteReportController/v1/getKnowledgeByid', params, {
            headers: {'X-AUTH-TOKEN': localStorage.getItem('token') }
          }).then((res) => {
            var data = JSON.parse(res.data);
            if (!!data&&data.status=="1") {
              //console.log(data.data);
              document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"DescriptionToReport":data.data.description}),"*");
              document.getElementById('edit-iframe').contentWindow.postMessage(JSON.stringify({"ConclusionToReport":data.data.conclusion}) ,"*");
              this.description = data.data.description;
              this.conclusion = data.data.conclusion;
            } else {
              return false;
            }
          }, (err) => {
                console.log(err);
          });
        }else{
          // 是父级  请求子级增加内容
          this.shuyuOnExpand(event, treeId, treeNode);
        }
      },
      shuyuOnExpand(event, treeId, treeNode){
        console.log("shuyuOnExpand");
          var treeNodeId = treeNode.id;
          if(treeNodeId == 0){
            return;
          }else{
          var params={parentid:treeNodeId};
          this.$http.post(this.ip + '/xhhms/rest/interRemoteReportController/v1/getKnowledge', params, {
            headers: {'X-AUTH-TOKEN': localStorage.getItem('token') }
          }).then((res) => {
            var data = JSON.parse(res.data);
            console.log("data");
            if (!!data&&data.status=="1") {
              var tree = $.fn.zTree.getZTreeObj("shuyuSelect"); //重新渲染
              if (!treeNode.zAsync){
                  tree.addNodes(treeNode, data.data);
                  treeNode.zAsync = true;
              } else{
                  tree.reAsyncChildNodes(treeNode, "refresh");  //刷新内容
              }
            } else {
              return false;
            }
          }, (err) => {
                console.log(err);
          });
          }

      },

这是两个核心的函数。

相关推荐:

关于Node中事件循环的解析

Vue中class与style绑定以及条件与列表渲染的分析

以上就是vue如何利用树形控件z-tree动态添加数据的详细内容,更多请关注其它相关文章!

相关标签: 树形控件z-tree