如何在VUE框架中使用ztree插件

最新推荐文章于 2024-09-03 11:45:58 发布

Eliano

最新推荐文章于 2024-09-03 11:45:58 发布

阅读量1.2k

点赞数

一切还是以需求为导向！如下图所示：这是要求作出的效果。经过我综合考虑发现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)
            }
          }
        }
      },