El-Tree 扩展 父级选中可以影响子级,子级不能影响父级

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了El-Tree 扩展 父级选中可以影响子级,子级不能影响父级相关的知识,希望对你有一定的参考价值。

参考技术A check-strictly // 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false

加上check-strictly属性之后父子级将不会互相影响,再通过checkChange方法去遍历子级

<el-tree

              check-strictly

              :data="menuList"

              :props=" label: 'name', children: 'children' "

              node-key="id"

              ref="listTree"

              accordion

              show-checkbox

              @check-change="checkChange"

            >

            </el-tree>

checkChange (a, b, c)

      this.findChildren(a, b, c)

    ,

    findChildren (current, b, c)

      this.$refs.listTree.setChecked(current.id, b, c)

      const d = current.children

      if (d.length > 0)

        d.forEach(a =>

          this.findChildren(a, b, c)

        )

     

    ,

js实现多级复选框的交互

功能介绍
 
整个复选框是包含多级,可能有父级,可能有子级,在勾选复选框时,要做两种判断:
1要判断它下面有没有子级,有子级将子级的选中状态checked变得和自己一样。
2要判断它是否有父级,有父级勾选时判断同级兄弟是否都是选中状态,如果选中将父级勾选上;取消勾选时将父级的勾选状态变为false
 
复选框交互要实现的效果如下:
 
 
实现思路说明
 
1.设计一种方式让我们知道谁是自己的父级谁是自己的子级。我是用的<input>的name和id值标识的。子级的name值等于父级的id值
2.checkone(),递归操作父级,当前checked=false,所有父级设置为false。当前checked=true,递归判断父级的所有自己是否都选中了,如果是就将父级的checked=true
3.check(),check one操纵父级,同时递归操作当前元素的子级全选或全取消
4.submittestsuit()提交功能,遍历所有<input>,将所有checked=true,且id为testcase的提交,id可以自己定义(因为我需求只要最末级的case的值)
 
复选框JS代码如下:
<script type="text/javascript">
     function checkone(element){
        var checkstatus=element.checked
        var checkid=element.id
          var checkname=element.name
          if (checkstatus == false && document.getElementById(checkname)){
              document.getElementById(checkname).checked=checkstatus//document.getElementById(checkname)表示全选按钮
          }
          else if (document.getElementById(checkname)){
              var samelevelgroup=document.getElementsByName(checkname)
              var allchecked=true
              for (var i=0;i<samelevelgroup.length;i++){
                  if (samelevelgroup[i].checked==false){
                      allchecked=false
                  }

              }
              if ( allchecked==true ){
                      document.getElementById(checkname).checked=true
                  }
          }
          if (document.getElementById(checkname)){
              checkone(document.getElementById(checkname))
          }
    }
     function check(element)
      {
{#          全选用id,全选下面的复选框用name对应#}
        var checkstatus=element.checked
        var checkid=element.id

          checkone(element)
          var checkgroups_down=document.getElementsByName(checkid)
        for (var i = 0; i < checkgroups_down.length; i++)
        {
          checkgroups_down[i].checked=checkstatus
            var childid= checkgroups_down[i].id
            if (document.getElementsByName(childid).length>1){//如果下面有name和自己的id一致,就认为这是分组全选,下面还有子项
                check(document.getElementById(childid))
            }
        }
      }
     function submittestsuit() {
          var allcase=document.getElementsByTagName("input")
          var selectcase=[]
          for (var i=0;i<allcase.length;i++){
              if ((allcase[i].checked == true) && (allcase[i].id == "testcase")) {

                  var filename=allcase[i].parentNode.previousSibling.previousSibling.innerHTML
                  var functionname=allcase[i].parentNode.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML
{#                  alert(functionname)#}
                  var caseinfo = {
                    functionname:functionname,
                    filename:filename
                    }
                  selectcase.push(caseinfo)
              }

          }
          if (selectcase.length < 1){
              alert("至少选择一个case!")
          }
          else{
              $.ajax({
                    cache: true,
                    type: "POST",
                    url:"{% url "save_testsuit" %}",
                    data:{caseinfos:JSON.stringify(selectcase)},// 你的formid
                    async: false,
                    error: function(request) {
                        alert("保存失败");
                    },
                    success: function(data) {
                        if(data.respcode==0){
                            alert("测试套件已生成");
                            var w = window.open();
                            w.location=("{% url "runtestinfo" %}")
                        }
                        else{
                            alert(JSON.stringify(selectcase))
                            alert(data.msg);
                        }
                    }
                    });
          }

      }
</script>
 
 
复选框HTML代码如下:
 
主要是把<input>子级和父级的name和id值对应一样即可
 
<div style="margin-bottom: 10px">
        <span style="margin-left: 10px">全选所有case </span>
        <input type="checkbox" id="groupcheck" onclick="check(this)">
    </div>
    <div>
        <table class="table table-hover">
            <tr style="background-color: #5bc0de">
                <th>用例描述</th>
                <th>测试方法名</th>
                <th>所属文件</th>
                <th>勾选要执行的用例</th>
            </tr>
{#            全选是根据name和id进行联动的,上级的id和下级的name要一致#}
            {% for group in testcaselist.testcaseslist %}
            <tr style="background-color: #9acfea">
                <th>
                    <span>{{ group.groupname }}</span>
                    <span><input id="{{ group.groupname }}" name="groupcheck" type="checkbox" onclick="check(this)"></span>
                </th>
            </tr>

            {% for testcase in group.testcase %}
            <tr>
                <td width="35%">{{ testcase.desc }}</td>
                <td width="30%" id="functionname">{{ testcase.functionname }}</td>
                <td width="20%" id="filename">{{ testcase.filename }}</td>
                <td width="15%"><input id="testcase" name="{{ group.groupname }}" type="checkbox" onclick="check(this)"></td>
            </tr>
            {% endfor %}

            {% endfor %}
 
        </table>
    </div>
    <div style="margin-top: 20px">
        <button type="button" class="btn btn-default" onclick="submittestsuit()">生成测试套件</button>

    </div>
 

 

 

以上是关于El-Tree 扩展 父级选中可以影响子级,子级不能影响父级的主要内容,如果未能解决你的问题,请参考以下文章

如果父级不调用 wait(),则同一父级的两个子级不使用管道进行通信

C++ 虚拟方法:我必须在父类中为子级和父级不共享的每个方法创建一个虚拟方法吗?

解决el-tree勾选子的时候获取父的id

来自自定义 LinearLayout 的子级不显示波纹效果

vue结合Ant Design实现后台系统的权限分配(支持无限子级嵌套)

全选取消2级 checkbox的选中切换