在html表中展开和折叠3级分层行

时间：2014-11-22 04:53:16

标签： javascript jquery html

我在表结构中有一些分层数据，如下所示： （例1）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
    A.2.1
    A.2.2
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我希望能够在每个级别内展开和折叠，例​​如，如果我点击A.2，它的孩子应该崩溃:(示例2）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我点击A，它的所有孩子都应该崩溃:(例3）

A 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我再次展开A，A.2仍应保持折叠状态（儿童隐藏）（例4）

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我尝试过来自http://jsfiddle.net/y4Mdy/1124/的代码示例 - 但不处理三级层次结构。 $（this）.nextUntil似乎很好用，但是当下一个tr是父行时，它会折叠到下一个子行。此外，如果我折叠第二级然后折叠父级，则隐藏第二级，但第三级显示：

A 
    A.1.1 
    A.1.2       
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我也尝试了http://jsfiddle.net/icc97/XNkbE/ - 但是当点击父级时，子级别不会回到折叠状态（类似于上面的示例4）

有人可以帮忙吗？

提前致谢。

3 个答案:

答案 0 :(得分：1)

此解决方案应处理任意数量的级别。

我原来的jsfiddle是here。我将比这个答案更频繁地更新它。

$("tbody > tr:not([data-level='3'])").addClass("expandable sign folded");
$("tbody > tr:not([data-level='1'])").hide();
$("tbody > tr")
    .css("padding-left", function (index) {
    return 10 * parseInt($(this).data("level"), 10) + "px";
});

function range(lowEnd, highEnd) {
    // assert lowEnd >= 0 and highEnd < 100
    var validation = (lowEnd <= highEnd) && (lowEnd >= 0) && (highEnd < 100);
    if (!(validation)) {
        console.assert(validation, 
                       'Function "range" received unlikely values: ' +
                       lowEnd + ' and ' + highEnd + "...");
    } else {
        var arr = [];
        while (lowEnd <= highEnd) {
            arr.push(lowEnd++);
        }
        return arr;
    }
}

function name_range(fun, lowEnd, highEnd) {
    var arr = range(lowEnd, highEnd);
    jQuery.each(arr, function (index, value) {
        arr[index] = fun(value);
    });
    return arr;
}

function create_selector(level) {
    return "[data-level='" + level + "']";
}

$("tr.expandable").click(function () {
    var this_level = parseInt($(this).data("level"), 10);
    var this_level_selector = create_selector(this_level);
    var next_level_selector = create_selector(this_level + 1);
    var next_or_lower = name_range(create_selector,
    this_level + 1, 10); // TODO: find last level
    var this_or_higher = name_range(create_selector, 0, this_level);
    var node = $(this).prevUntil(this_or_higher.join(","));
    // different behaviour according to state (expanded / folded):
    if ($(this).hasClass("expanded")) {
        $(this).removeClass("expanded").addClass('folded');
        $(node).not("expanded").removeClass("expanded").addClass('folded');
        $(node).filter(next_or_lower.join(",")).hide();
    } else {
        $(this).addClass("expanded").removeClass('folded');
        $(node).filter(next_level_selector).show();
    }
});
table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    border-color: gray;
}
tr:not([data-level='3']) {
    cursor:pointer;
    font-weight: bold;
}
tr.expanded .sign:after {
    content:"-";
}
tr.folded .sign:after {
    content:"+";
}
td:first-child {
    padding: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="0">
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
    </thead>
    <tbody>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Trade<span class="sign"></span>

            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
    </tbody>
</table>

答案 1 :(得分：0)

由于您只处理嵌套的table，因此您可以使用以下内容：

CSS：

tbody.collapsed {
    display: none;
}

JS：

$('thead').click(function(){

        $(this).siblings('tbody').toggleClass('collapsed');

    });

我使用thead和tbody来使用语义。

答案 2 :(得分：0)

如果单击第一个级别的元素，则将隐藏第2层和第3层的所有可见元素。如果第一个级别的元素已被隐藏，则使第2层的元素再次可见。

    toggleElement = function(context) {
  let current = context.parentElement
  if (current.className == 'level1') {
    toggleLevel1(current)
  } else if (current.className == 'level2') {
    toggleLevel2(current)
  }
};

toggleLevel1 = function(current) {
  let nextSibling = current.nextElementSibling;

  while (nextSibling && nextSibling.className == 'level2') {
    nextSibling.hidden = nextSibling.hidden ? false : true
    nextSibling = nextSibling.nextElementSibling
    while (nextSibling && nextSibling.className == 'level3') {
      if (!nextSibling.hidden) {
        nextSibling.hidden = nextSibling.hidden ? false : true
      }
      nextSibling = nextSibling.nextElementSibling
    }
  }
};

toggleLevel2 = function(current) {
  let nextSibling = current.nextElementSibling;

  while (nextSibling && nextSibling.className == 'level3') {
    nextSibling.hidden = nextSibling.hidden ? false : true
    nextSibling = nextSibling.nextElementSibling
  }
};
<html>
<header>
  
</header>
<style>
table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    border-color: gray;
}
.level2 td:nth-child(1){
  padding-left: 5px;
}

.level3 td:nth-child(1){
  padding-left: 10px;
}
</style>
<body>
<table border="0">
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
    </thead>
    <tbody>
        <tr class="level1">
            <td onclick="toggleElement(this)">Trade

            </td>
            <td>total1</td>
            <td>total1</td>
            <td>data1</td>
        </tr>
        <tr class="level2">
            <td onclick="toggleElement(this)">sub stores

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="level3">
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr class="level2">
            <td onclick="toggleElement(this)">sub stores

            </td>
            <td>total2</td>
            <td>data2</td>
            <td>data2</td>
        </tr>
        <tr class="level3">
            <td>data3</td>
            <td>data3</td>
            <td>data3</td>
            <td>data3</td>
        </tr>
        <tr class="level1">
            <td onclick="toggleElement(this)">Trade

            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
        <tr class="level2" >
            <td onclick="toggleElement(this)">sub stores3

            </td>
            <td>total3</td>
            <td>data3</td>
            <td>data3</td>
        </tr>
        <tr class="level3">
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
            <td>data4</td>
        </tr>
        <tr class="level2" >
            <td onclick="toggleElement(this)">sub stores5

            </td>
            <td>total5</td>
            <td>data5</td>
            <td>data5</td>
        </tr>
        <tr class="level3">
            <td>data6</td>
            <td>data6</td>
            <td>data6</td>
            <td>data6</td>
        </tr>
    </tbody>
</table>
</body>
</html>

相关问题
最新问题