zTree设置父节点不可选中,只可选中子节点(也可根据需求设置节点选中状态)

有两种方法:显示check radio 但是不能选中父节点,只能选中子节点;另一种方法是直接不显示父节点的check radio

一、是在callback里写回调方法,都是显示check radio的,有两种情况,一种是不可选择,一种是判断是否是父节点,是的话直接返回

callback: {
            beforeCheck: this.zTreeBeforeCheck,//在选择前
            onClick: this.zTreeOnClick    //  单击节点
          }
  zTreeBeforeCheck(treeId, treeNode) {
//一、是父节点 返回false,不可选择
        return !treeNode.isParent;
      },
      zTreeOnClick(event, treeId, treeNode) {
//二、在点击节点时判断是不是父节点。是的话直接返回
        if(treeNode.isParent) return this.$message.warning('请选择子节点!')
        treeObj.checkNode(treeNode, !treeNode.checked, true);
      },

二、另一种写法是通过pid来判断的,直接不显示父节点的check radio,效果如图

代码如下

this.$store.dispatch('SysFolder/getFileTree', this.key).then(() => {
          treeObj = $.fn.zTree.init($("#equipTree"), setting, this.$store.state.SysFolder.treeList);
          let nodeAll = treeObj.transformToArray(treeObj.getNodes());
          let node;
          for(let i = 0;i < nodeAll .length;i++){
            let id = nodeAll [i].id;
            for(let j = 0;j < nodeAll .length;j++){
              if(id == nodeAll [j].pid){
                node = treeObj.getNodeByParam("id", id, null);
                node.nocheck = true;//不显示check radio
                treeObj.updateNode(node);//更新节点
              }
            }
          }
          setTimeout(() => {
            this.isloading = false;
            this.isTree = true;
            treeObj.expandAll(true);
          }, 300);
        }

三、根据具体需要展示可选中节点

eg:有个类别树,只可选中三级节点,如图

可根据上面方法可以设置只有子节点选中,其实只有节点时也可以选中的

此时就可以根据需求来判断一级,二级节点是否可以选中了,当然返回的数据中要有标识(此处是levels),只根据id和pid是不能判断出的。

 // 当节点是一级或二级时,也不显示check节点
          if (nodeAll[i].levels === '一级' || nodeAll[i].levels === '二级') {
            node = this.treeObj.getNodeByParam('id', id, null)
            node.nocheck = true // 不显示check radio
            this.treeObj.updateNode(node) // 更新节点
          }

 

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值