Question

我正在寻找一种方法，使表行可以在多个级别中进行集合或扩展。应该折叠默认视图（可能显示级别0和1？）

这就是我现在所拥有的，从这里的另一个问题的答案中收集。

<table>
      <tr class="header">
        <th>A</th>
        <th>B</th>
         </tr>
      <tr class="level_0" id="10">
        <td>10</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_10" id="11">
        <td>10.1</td>
        <td>Level 1</td>
      </tr>
     <tr class="level_1 parent_10" id="12">
        <td >10.2</td>
        <td>Level 1</td>
      </tr>
      <tr class="level_2 parent_12" id="13">
        <td>10.2.1</td>
        <td>Level 2</td>
   </tr>
   <tr class="level_0" id="20">
        <td>20</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_20" id="21">
        <td>20.1</td>
        <td>Level 1</td>
      </tr>
  </table>

JavaScript的：

if (typeof jQuery === 'undefined') throw "jQuery Required";

jQuery(function ($) {
    var treeTable = {
        parentClassPrefix : '',
        collapsedClass : 'collapsed',
        init : function(parentClassPrefix) {
            this.parentClassPrefix = parentClassPrefix;
            $('table').on('click', 'tr', function () { 
                treeTable.toggleRowChildren($(this));
            });
        },
        toggleRowChildren : function(parentRow) {
            var childClass = this.parentClassPrefix+parentRow.attr('id');
            var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
            childrenRows.toggle();
            childrenRows.each(function(){
                if (!$(this).hasClass(treeTable.collapsedClass)) {
                    treeTable.toggleRowChildren($(this));
                }
            });
            parentRow.toggleClass(this.collapsedClass);
        }
    };

    treeTable.init('parent_');
});

Answer 1

这样的事情 - 如果我要花更多的时间来看待它，这可以做得更好。但这只是一个如何完成它的简单例子。

$(document).ready(function()
{
  $(".level_0").each(function()
  {
    console.log("IN HERE");
    $(this).nextUntil('tr.level_0').toggle();
  });
  
});

$(document).on("click", '.level_0', function()
{
  $(this).nextUntil('tr.level_0').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table>
      <tr class="header">
        <th>A</th>
        <th>B</th>
         </tr>
      <tr class="level_0" id="10">
        <td>10</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_10" id="11">
        <td>10.1</td>
        <td>Level 1</td>
      </tr>
     <tr class="level_1 parent_10" id="12">
        <td >10.2</td>
        <td>Level 1</td>
      </tr>
      <tr class="level_2 parent_12" id="13">
        <td>10.2.1</td>
        <td>Level 2</td>
   </tr>
   <tr class="level_0" id="20">
        <td>20</td>
        <td> Level 0</td>
      </tr>
      <tr class="level_1 parent_20" id="21">
        <td>20.1</td>
        <td>Level 1</td>
      </tr>
  </table>

可折叠表行与jQuery

1 个答案: