首頁  >  文章  >  web前端  >  vue如何利用樹狀控制項z-tree動態新增數據

vue如何利用樹狀控制項z-tree動態新增數據

不言
不言原創
2018-07-21 10:06:475170瀏覽

這篇文章給大家分享的是關於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

 <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();

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

#接下來是兩個對應配置的函數

    shuyuOnClick(event, treeId, treeNode){
        if(!treeNode.isParent){   // 判断当前节点不是父级节点 //根据自己的数据来 
          var acknowledgeid = treeNode.id;
          var params= {id:acknowledgeid};
          this.$http.post(this.ip+&#39;/xhhms/rest/interRemoteReportController/v1/getKnowledgeByid&#39;, params, {
            headers: {&#39;X-AUTH-TOKEN&#39;: localStorage.getItem(&#39;token&#39;) }
          }).then((res) => {
            var data = JSON.parse(res.data);
            if (!!data&&data.status=="1") {
              //console.log(data.data);
              document.getElementById(&#39;edit-iframe&#39;).contentWindow.postMessage(JSON.stringify({"DescriptionToReport":data.data.description}),"*");
              document.getElementById(&#39;edit-iframe&#39;).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 + &#39;/xhhms/rest/interRemoteReportController/v1/getKnowledge&#39;, params, {
            headers: {&#39;X-AUTH-TOKEN&#39;: localStorage.getItem(&#39;token&#39;) }
          }).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動態新增數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn