2. 程式人生 > >如何在VUE框架中使用ztree外掛

如何在VUE框架中使用ztree外掛

阿新 • • 發佈：2018-12-25

一切還是以需求為導向！如下圖所示：這是要求作出的效果。經過我綜合考慮發現ztree外掛與需求契合度比較高，所以果斷的使用了該外掛進行開發。簡單說下需求：管理目錄層級有四個子選單，可以新建父目錄和子目錄以及對目錄進行相關編輯操作。

相信大家遇到的第一個問題就是如何使用ztree外掛，沒錯！那自然要跑到ztree官網去看文件，熟讀文件是必不可少的！讀完文件後，那怎麼在vue框架中配置ztree外掛呢？網上的相關文章很少，這就需要自己摸索了。不過我已經踩過不少坑，童鞋拿去用即可。

下面開始貼程式碼：

html:

<el-dropdown @command="handleCommand">
			<el-button type="primary">
				管理目錄層級<i class="el-icon-arrow-down el-icon--right"></i>
			</el-button>
			<el-dropdown-menu slot="dropdown" style="width:145px;top: 189px;vertical-align: top;">
				<el-dropdown-item command="1">新建目錄</el-dropdown-item>
				<el-dropdown-item command="2" :disabled="disabledMuse">新建子目錄</el-dropdown-item>
				<el-dropdown-item command="3" :disabled="disabledMuse">修改</el-dropdown-item>
				<el-dropdown-item command="4" :disabled="disabledMuse">刪除</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
 
// ztree主體
 
<div class="personal_library">
		<div class="seachVal">
			<el-input v-model="inputSeach" id="inputSeachs" placeholder="請輸入關鍵字..." @focus="inputFocus" @blur="inputBlur" ></el-input>
			<i class="el-icon-search" :class="{ iconSeach1 : isShowSeach1}"></i>
			<i class="el-icon-close" :class="{ iconSeach2 : isShowSeach2}" @click="clearInput"></i>
			<i class="el-icon-plus" :class="{ iconNone1 : isShowicon1}"  @click="expandAndCloseNode(true)"></i>
			<i class="el-icon-minus" :class="{ iconNone2 : isShowicon2}" @click="expandAndCloseNode(false)"></i>
		</div>
			<div class="folderMain">
				<p class="tipFont" :class="{ tipShow: activeTip1 }">請點選“管理目錄層級—新建目錄”</p>
				<ul id="tree" class="ztree" :class="{ ulShow: activeTip2 }"></ul>
			</div>
		</div>

new Vue({
    el: '#appSetFast',
    data: function () {
      return {
        // ztree配置
        setting: {
          data: {
            simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "fast_id",
              rootPId: 0
            }
          },
          view: {
            showLine: false,
            dblClickExpand: false,
            addDiyDom: this.addDiyDom,
            nameIsHTML: true,
            selectedMulti: false
          },
          callback: {
            onClick: this.onNodeClick,
            beforeRename: this.zTreeBeforeRename,
          }
        },
        zNodes: []
      },
 methods: {
      // 點選管理目錄
      handleCommand: function (command) {
        if (command == 1) {
          this.addFolder(1);
        } else if (command == 2) {
          this.addFolder(2);
        } else if (command == 3) {
          this.editNode();
        } else if (command == 4) {
          this.removeNode();
        }
      },
      // 獲取目錄
      freshArea: function () {
        $.ajax({
          type: 'post',
          url: '/api/get_fast',
          processData: false,
          contentType: false,
          success: res => {
            this.zNodes = res.data
            $.fn.zTree.init($("#tree"), this.setting, this.zNodes);
            if (!this.zNodes) {
              return
            }
            this.zNodesData();
            this.selectNodes(this.nodesIds)
            // 初始化模糊搜尋方法
            fuzzySearch('tree', '#inputSeachs', true, true)
          },
          error: () => {
            this.tipMsg('目錄獲取失敗！', 'error')
          }
        })
      },
      // 通過判斷陣列有沒有位元組點來顯示按鈕和提示
      zNodesData: function () {
        if (this.zNodes.length) {
          this.activeTip1 = true;
          this.activeTip2 = false;
          this.disabledMuse = false;
        } else {
          this.activeTip1 = false;
          this.activeTip2 = true;
          this.disabledMuse = true;
        }
      },
      // 單擊選中目錄並獲取快捷回覆條目數
      onNodeClick: function (e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
          nodes = zTree.getSelectedNodes(),
          treeNode = nodes[0];
        console.log(treeNode, 44)
        if(treeNode.oldname){
          this.nodeNames = treeNode.oldname
        }else{
          this.nodeNames = treeNode.name
        }
        this.nodesIds = treeNode.id;
        this.fastreplyId = treeNode.fastreply_id;
        this.getFilePath(treeNode);
        $.ajax({
          type: 'get',
          url: get_fast',
          data: {'id': this.nodesIds},
          success: res => {
            this.dataTable = res.data
            this.currentPage = 1
            this.userListDataLimit(this.dataTable, this.currentPage);
            this.userTotal = this.dataTable.length;
          }, error: () => {
            this.tipMsg('獲取回覆內容失敗！', 'error')
          }
        })
      },
      // 麵包屑
      getFilePath: function (treeObj) {
        if (treeObj == null)return '';
        console.log(treeObj, 33)
        if(treeObj.oldname){
          var filename = treeObj.oldname
        }else {
          var filename = treeObj.name
        }
        if (filename.length > 12) {
          filename = filename.substring(0, 12) + "..."
        }
        var pNode = treeObj.getParentNode();
        if (pNode != null) {
          filename = this.getFilePath(pNode) + " / " + filename;
        }
        this.breadcrumbArr = filename;
        return this.breadcrumbArr;
      },
      // 搜尋框聚焦事件
      inputFocus: function () {
        $('#inputSeachs').attr('placeholder', '')
      },
      // 搜尋框失焦事件
      inputBlur: function () {
        if (this.inputSeach == '') {
          $('#inputSeachs').attr('placeholder', '請輸入關鍵字...')
        }
      },
      // 清楚搜尋框
      clearInput: function () {
        this.inputSeach = '';
        $.fn.zTree.init($("#tree"), this.setting, this.zNodes);
      },
      // 新建目錄
      addFolder: function (e) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
          nodes = zTree.getSelectedNodes(),
          treeNode = nodes[0];
        this.newCountNode = "新建目錄" + (this.newCount++);
        if (treeNode) {
          var parentNode = treeNode.getParentNode();
          // 選中節點的條件下新建同級目錄
          console.log(treeNode, 22)
          if (e == 1) {
            if (treeNode.getParentNode()) {
              this.parentNodeId = treeNode.getParentNode().id
              $.ajax({
                type: 'post',
                url: 'add_fast',
                data: {'fastreply_id': parseInt(this.parentNodeId), 'name': this.newCountNode},
                success: data => {
                  treeNode = zTree.addNodes(parentNode, {
                    id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
                  })
                },
                error: () => {
                  this.tipMsg('新建目錄失敗1！', 'error')
                }
              })
            } else {
              $.ajax({
                type: 'post',
                url: '/api/add_fast',
                data: {'name': this.newCountNode},
                success: data => {
                  treeNode = zTree.addNodes(null, {
                    id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
                  })
                },
                error: () => {
                  this.tipMsg('新建目錄失敗2！', 'error')
                }
              })
            }
            // 新建子目錄
          } else if (e == 2) {
            console.log(treeNode, 66)
            $.ajax({
              type: 'post',
              url:'/api/add_fast',
              data: {'fastreply_id': treeNode.id, 'name': this.newCountNode},
              success: data => {
                console.log(treeNode, 77)
                treeNode = zTree.addNodes(treeNode, {
                  id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
                })
                console.log(treeNode, 99)
                console.log(this.zNodes, 88)
                this.freshArea()
              },
              error: () => {
                this.tipMsg('新建目錄失敗3！', 'error')
              }
            })
          }
          // 新建根目錄
        } else if (e != 2) {
          $.ajax({
            type: 'post',
            url:'/api/add_fast',
            data: {'name': this.newCountNode},
            success: data => {
              this.activeTip1 = true;
              this.activeTip2 = false;
              this.disabledMuse = false;
              console.log(data, 322)
              treeNode = zTree.addNodes(null, {
                id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
              })
            },
            error: () => {
              this.tipMsg('新建目錄失敗！', 'error')
            }
          })
        } else if (e == 2) {
          this.tipMsg('請新建目錄才能新建子目錄！', 'warning');
        }
      },
      // 修改名稱
      editNode: function () {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
          nodes = zTree.getSelectedNodes(),
          treeNode = nodes[0];
        if (nodes.length == 0) {
          this.tipMsg('請選擇要修改的目錄！', 'warning')
          return
        }
        this.nodesNames = treeNode.name;
        if(treeNode.oldname){
          treeNode.name = treeNode.oldname
        }
        zTree.editName(treeNode)
      },
      zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
        if (this.nodesNames != newName) {
          $.ajax({
            type: 'post',
            url:'/api/set_fast',
            data: {'id': treeNode.id, 'name': newName},
            success: res => {
              this.freshArea()
            },
            error: () => {
              this.tipMsg('名稱修改失敗！', 'error')
            }
          })
        }
      },
      // 新增條目數
      addDiyDom: function (treeId, treeNode) {
        var aObj = $("#" + treeNode.tId + this.IDMark_A);
        var editStr = "<span id='diyBtn_" + treeNode.id + "'>(" + treeNode.len + ")</span>";
        aObj.after(editStr);
        // 顯示省略號
        var spantxt = $("#" + treeNode.tId + "_span").html();
        if (spantxt.length > 12) {
          spantxt = spantxt.substring(0, 12) + "...";
          $("#" + treeNode.tId + "_span").html(spantxt);
        }
      },
      // 展開或關閉所有節點
      expandAndCloseNode: function (e) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (e) {
          this.isShowicon2 = false;
          this.isShowicon1 = true;
        } else {
          this.isShowicon2 = true;
          this.isShowicon1 = false;
        }
        zTree.expandAll(e);
      },
      // 提示
      tipMsg: function (msg, type) {
        this.$message({
          message: msg,
          type: type
        });
      },
      // 刪除選中的節點
      removeNode: function () {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
          nodes = zTree.getSelectedNodes();
        if (nodes.length == 0) {
          this.tipMsg('請選擇要刪除的目錄！', 'warning')
          return
        } else {
          this.delTip = '您是否確認要刪除當前目錄';
          this.activeShadow1 = false;
          this.activeShadow2 = true;
          this.activeShadow3 = false;
          this.flagSure = 1;
        }
      },
      // 刪除框確認按鈕
      sureRemove: function () {
        if (this.flagSure == 1) {
          var zTree = $.fn.zTree.getZTreeObj("tree"),
            nodes = zTree.getSelectedNodes(),
            treeNode = nodes[0];
          $.ajax({
            type: 'post',
            url: '/api/del_fast',
            data: {'id': treeNode.id},
            success: data => {
              zTree.removeNode(treeNode);
              this.activeShadow1 = true;
              this.activeShadow3 = true;
              this.breadcrumbArr = ''
              this.freshArea()
            },
            error: () => {
              this.tipMsg('刪除失敗！', 'error')
            }
          })
        } else if (this.flagSure == 2) {
          $.ajax({
            type: 'post',
            url: '/api/del_fast',
            data: {'id': this.listId},
            success: data => {
              this.activeShadow1 = true;
              this.activeShadow3 = true;
              this.freshArea()
              this.onNodeClick()
            }, error: () => {
              this.tipMsg('刪除失敗！', 'error')
            }
          })
        } else if (this.flagSure == 3) {
          this.activeShadow1 = true;
          this.activeShadow3 = true;
          $('.uploadPortrait').click()
        }
      },
      // 獲取資料後根據id重新選中節點
      selectNodes: function (id) {
        var zTree = $.fn.zTree.getZTreeObj("tree"),
        nodes = zTree.transformToArray(zTree.getNodes());
        for(var i=0; i<nodes.length; i++){
          if(id == nodes[i].id){
            zTree.selectNode(nodes[i], true)
            if(nodes[i].fastreply_id){
              zTree.expandNode(nodes[i], true, false)
            }
          }
        }
      },

上面每一個方法都有註釋，一看便知。如果要做搜尋功能的童鞋需要注意引入 fuzzySearch（‘tree’, ‘#inputSeachs’, true, true）外掛，這個官網的demo有很詳細的介紹，下載原始碼就可。如果每個層級目錄需要新增自己的內容，可以仔細看下上面這個addDiyDom() 函式，使用的相關方法一定要在data中的setting：{}中配置，否則不會生效。ztree外掛是我使用過最完美的外掛之一，在此感謝作者開發這麼強大的外掛！

作者：愛吃漁的熊
來源：CSDN
原文：https://blog.csdn.net/gaoxin666/article/details/82859355


版權宣告：本文為博主原創文章，轉載請附上博文連結！

相關推薦

如何在VUE框架中使用ztree外掛

一切還是以需求為導向！如下圖所示：這是要求作出的效果。經過我綜合考慮發現ztree外掛與需求契合度比較高，所以果斷的使用了該外掛進行開發。簡單說下需求：管理目錄層級有四個子選單，可以新建父目錄和子目錄以及對目錄進行相關編輯操作。 相信大家遇到的第一個問題就是如何使用ztree外掛，沒錯！

專案實戰之vue爬坑之路：vue框架中如何註冊全域性公共過濾器filter、全域性公共外掛、全域性公共元件component

專案需求： 在我們的實際專案的開發中，經常會遇到一些可以重複利用的方法和元件，比如:我們在一個專案中可能會經常用到格式化時間的方法。這個時候就需要我們把這個方法封裝起來，註冊成一個全域性的過濾器，在整個專案中都可以使用，這樣既可以提高程式碼的使用效率，也便於我們

在Vue框架中引入Element

靈活 str mage module ref ext git 限制 render 文章會講到如何在Vue框架中引入Element 那我們先來說一下Vue框架：Vue是漸進式，JavaScript框架。很多人不理解什麽是漸進式，簡單點講就是易用、靈活、高效（沒有太多限制） 這

vue框架中的表單輸入框不支援focus以及blur事件的解決方案

採用指令的方式來解決這個問題(此處的前端框架以mint-ui為例): 1.html引用: v-mtfocus 2.在例項中新增指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.query

vue框架中單頁面檔案更改body，html頁面背景顏色

單頁面應用中，在全域性body設定了背景顏色和背景圖片。但是想要修改其中的一個頁面如'/result'這個檔案,而又不影響其他的樣式，以前看到有例子用position:fixed來修改背景，我個人認為這個僅僅適用於頁面篇幅不大，一屏足以顯示的頁面。可以在‘/result’這個css加上scoped&

Vue 框架中遇到的訣竅

                                            &

vue.js中圖表外掛vue2-highcharts的使用

主要的幾個函式為getChart(),update(),setCategories(),addSeries();removeSeries();通過ajax請求後臺介面；效果如下圖<template>   <div class="row">       

Vue腳手架中swiper外掛的引入方式

一、安裝swiper外掛 1、開啟終端，進入vue-cli腳手架搭建的專案中             cd xx/xx/xxx/xxx 2、安裝swiper外掛         &nb

D3.js的V5版本-Vue框架中使用(第八章) ---樹狀圖

一. api簡介d3.tree()，建立一個樹狀圖生成器d3.tree().size()，定義樹的大小d3.hierarchy()，層級佈局，需要和tree生成器一起使用，來得到繪製樹所需要的節點資料和邊資料node.descendants()得到所有的節點，已經經過轉換的資

D3.js的V5版本-Vue框架中使用(第六章) ---互動式操作

一. Api使用on("eventName",function)；該函式是新增一個監聽事件，它的第一個引數是事件型別，第二個引數是響應事件的內容d3.select(this), 選擇當前元素   常見的事件型別click：滑鼠單擊某元素時觸發，相當於mousedown和mou

D3.js的V5版本-Vue框架中使用(第九章) ---力導向圖

一. Api使用 d3.forceSimulation() ，新建一個力導向圖， d3.forceSimulation().force(),新增或者移除一個力 d3.forceSimulation().nodes()，輸入是一個數組，然後將這個輸入的陣列進行一定的資料轉

D3.js的V5版本-Vue框架中使用(第五章) ---讓圖表動起來

一. api講解 * .attr(xxx) .transition() .attr(xxx)，transition()表示新增過渡，也就是從前一個屬性過渡到後一個屬性 * .duration(2000)，表示過渡時間持續2秒 * .delay(500)，表示延遲0.4秒後再進

Cordova與現有框架的結合，Cordova外掛使用教程，Cordova自定義外掛，框架整合Cordova，將Cordova整合到現有框架中

 一、框架整合cordova 將cordova整合到現有框架中 一般cordova工程是通過CMD命令來建立一個工程並新增Android、ios等平臺，這樣的建立方式可以完整的下載開發過程中所需要的的外掛。也是最方便和快捷一種方式。因此我們需要用這種方式將我們現有的框架放入到已建好的cordov

vue中常用外掛（貨幣、日期）

貨幣外掛： 價格格式化 // https://github.com/vuejs/vuex/blob/dev/examples/shopping-cart/currency.js const digitsRE = /(\d{3})(?=\d)/g /** * [currency 金額格式化函式] * @

Laravel框架中縮小webpack打包vue js的體積

轉載，原文： Laravel框架中縮小Vue應用的體積 https://www.codercto.com/a/12720.html laravel中 webpack打包生成的app.js居然有3M，生成的production版也有1.4M，放到伺服器上，首頁開啟要十幾秒（1M

vue中使用外掛格式化json（可伸縮）

原本可以使用<pre>標籤+JSON.stringfy()函式解決json格式化顯示的問題，但是資料量過大希望可以像jsonviewer一樣能夠伸縮，所以使用了vue-json-viewer外掛，mark如下： 1、安裝 $ npm install vue-json-viewer

前端框架Vue——vue-i18n ，vue專案中如何實現國際化，$t的用法

一、demo 場景需求分析 需求很簡單，左上角 ‘’網易雲音樂‘’就是一箇中英文切換的按鈕，點選彈出提示框，確認切換語言後，實現英文版本。 切換成英文版本： 二、實現國際化   首先，我開發是以 vue 為技術棧，所以如題用的國際化外掛是 vue

基於vue框架專案開發過程中遇到的問題總結（一）

（一）關於computed修改data裡變數的值 問題：computed裡是不能直接修改data裡變數的值，否則在git commit 時會報錯 解決：在computed裡使用get和set來進行獲取和修改data變數，（參考下圖） （二）computed裡監聽陣列

Vue開發——使用JQ的zTree外掛封裝樹元件

版權宣告：本文為博主原創文章，未經博主允許不得轉載。    https://blog.csdn.net/guanguan0_0/article/details/80359601 1.通過npm安裝jquery npm install jquery --save-dev 2.

【ES6】vue中Swipe外掛處理資料應用於輪播分頁

JSON資料： category_list_res: [ { name: '美食', url: 'http://p1.meituan.net/jungle/bd3ea637aeaa2fb612