vue使用树形控件z-tree,动态添加数据,默认展开第一行

环境:vue 2.9.3; webpack;

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

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

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

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

el-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

 
    // 注意id,下面需要用到id

    初始化控件,显示最顶级数据      

    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);
              });
              }
    
          },

    这是两个核心的函数。

     ## 如果需要展开第一行直接在初始化那里修改即可。

    $.fn.zTree.init($("#shuyuSelect"), this.shuyusetting, data.data);
    var treeObj = $.fn.zTree.getZTreeObj("shuyuSelect");
    var nodes = treeObj.getNodes();
    treeObj.expandNode(nodes[0]);  // 展开第一行

     

    转载于:https://www.cnblogs.com/shuangzikun/p/taotao_vue_z-tree.html

    你可能感兴趣的:(vue使用树形控件z-tree,动态添加数据,默认展开第一行)