vue-table-element表格的全部展开和全部折叠

Posted 2023-05-14

参考技术A 1.给按钮添加展开和折叠事件：

2.在export-methods 下添加方法：

3.点击即可实现全部展开和折叠；
完！

展开全部/折叠所有不工作的类列表

【中文标题】展开全部/折叠所有不工作的类列表

【英文标题】：Expand all / collapse all lists for class not working

【发布时间】：2018-04-26 15:57:59

【问题描述】：

我有一个树列表，用户可以通过单击打开或关闭分支。树有许多级别和子级别。当用户单击“全部折叠”或“全部展开”按钮时，我希望能够折叠所有分支（向下到第一级）或展开“my-clickable”类的所有分支。

我可以让各个分支关闭或打开。但我不能让它们同时打开或关闭。

这是我的 jsfiddle： https://jsfiddle.net/dyrh325f/65/

需要注意的一点是，在填充整个树的 ajax 调用之后使用了 Expand All 按钮。我在 ajax 调用的“完成”部分中有“全部展开”代码，因此它适用于生成的 html。

我希望用户在关闭一个或多个节点后能够展开整个树。我已经尝试了我在 jsFiddle 中的几种变体。似乎没有任何效果。我做错了什么？

我是一个 jQuery 新手所以 - 感谢任何和所有的帮助!!!

代码： HTML： 展开树

<font face="calibri" size="3pt" >
<ul id="tree1" class="mytree">  
<li id="theJob" class="my-clickable mytree liParOpen">My Job</li>
<ul id="treeList" class="mytree" name="treeList">
  <li id='0' class='mytree child-click'>Batcher</li>
    <li id='1' class='mytree child-click'>Retriever</li>
    <li id='2' class='my-clickable mytree liParOpen'> TASK 2</li>
    <ul class='mytree'>
      <li id='2a' class='mytree child-click'>Prep1</li>
      <li id='2b' class='mytree child-click'>Prep2</li>
      <li id='2c' class='mytree my-clickable liParOpen'>PREP3</li>
      <ul class='mytree'>
          <li id='2b1' class='mytree child-click'>PREP3a</li>
          <li id='2b2' class='mytree child-click'>PREP3b</li>
      </ul>
    </ul>
    <li id='3' class='mytree child-click' > task 3</li>
    <li id='4' class='my-clickable mytree liParOpen'> TASK 4</li>
    <ul class='mytree'>
      <li id='4a' class='mytree child-click'>Edit1</li>
      <li id='4b' class='mytree child-click'>Edit2</li>
    </ul>
    <li id='5' class='my-clickable mytree liParOpen'> TASK 5</li>
    <ul class='mytree'>
      <li id='5a' class='mytree my-clickable liParOpen'>Del1</li>
      <ul class='mytree'>
        <li id='5a1' class='mytree child-click'>Del1a</li>
        <li id='5a2' class='mytree child-click'>Del1b</li>
      </ul>
      <li id='5b' class='mytree child-click'>Del2</li>
    </ul>
    <li id='6' class='mytree child-click'>DocEjector-3</li>
</ul>
</ul>
</font>

jquery：

$(document).ready(function()

  // expand button
  $('#expandTree').on('click', function(event) 
     var all = $('.my-clickable');
     var closed = all.filter('.liParClosed');

     closed.find("ul").each(function()
        $(this).next('ul').attr("class", "liParOpen");
        $(this).nextAll('ul').toggle();
     );
   ); // end expand button 

   // collapse button
   $('#collapseTree').on('click', function(event) 
     var all = $('.my-clickable');
     var open = all.filter('.liParOpen');

     open.find("ul").each(function()
        $(this).next("ul").attr("class", "liParClosed");
        $(this).nextAll('ul').slideToggle();
     );
   ); // end collapse button 

   // this is the top most level parents
   $(".my-clickable").on('click', function(event) 

       var taskId=$(this).closest("li").attr('id');
       var tsk = '#'.concat(taskId);  

       if (taskId != "theJob") 
        if ($(tsk).next('ul').length <= 0) 
           $(tsk).toggleClass("liParOpen liParClosed");
               $(tsk).next('ul').slideToggle();
        
        else  
           //$(event.target).find('ul').toggle();
           $(tsk).toggleClass("liParOpen liParClosed");
               $(tsk).children('li').slideToggle();
               $(tsk).next('ul').slideToggle();
        
      // end if taskId != "theJob"
    else 
       $(tsk).toggleClass("liParOpen liParClosed");
       $(tsk).slideToggle();
    

    event.cancelBubble=true;
    event.stopPropagation();
);

//2nd level parents
$(".my-clickable").on('click', ".my-clickable", function(event) 
    var taskId=$(this).closest("li").attr('id');
    var tsk = '#'.concat(taskId);

    //$(event.target).find('ul').slideToggle();
    $(tsk).toggleClass("liParOpen liParClosed");

    //event.cancelBubble=true;
    event.stopPropagation();
);


// first level child w/no children (parent=job)
$(".child-click").on('click', function(event) 
    event.stopPropagation();
 );

);

CSS：

ul.mytree  li.liParClosed  
    background-color: green;
    fontWeight: normal;

ul.mytree  li.liParOpen  
    background-color: cyan;
    fontWeight: normal;

.selected
    border: 3px solid yellow; 
    background-color: yellow;
    fontWeight: bold;

ul.mytree  liParOpen selected 
    border: 3px solid red; 
    background-color: yellow;
    fontWeight: bold;

ul.mytree  li selected 
    border: 3px solid red; 
    background-color: yellow;
    fontWeight: bold;

ul.mytree  li  
    background-color: white;
    fontWeight: normal;

ul.mytree   
    background-color: white;
    fontWeight: normal;

【参考方案1】：

您几乎明白了，但是“liParClosed”和“liParOpen”类的切换没有正确完成。

这是一个解决这个问题的小提琴：

JS Fiddle

相关代码改动：

      // expand button
  $('#expandTree').on('click', function(event) 
            var all = $('.my-clickable');
            var closed = all.filter('.liParClosed');

            closed.each(function()
        $(this).removeClass('liParClosed').addClass('liParOpen');
                $(this).next('ul').slideToggle();
            );
    ); // end expand button 

    // collapse button
  $('#collapseTree').on('click', function(event) 
            var all = $('.my-clickable');
            var open = all.filter('.liParOpen');

            open.each(function()
          $(this).removeClass('liParOpen').addClass('liParClosed');
                $(this).next('ul').slideToggle();
            );
    ); // end collapse button 

查看添加/删除类的方式。还有，你是 寻找 open.find("ul") 但 open 本身必须循环通过，因为它是 open li 的列表。

希望这会有所帮助。 :)

【讨论】：

是的 - 谢谢！！！！我已经在这几个小时了！它有效:) 非常感谢！

很高兴能帮上忙！请将其标记为正确答案，以便关闭问题。