扩展一个节点直到它的子节点有一个兄弟节点

Question

考虑使用 JQuery - treetable 插件添加功能。

最初一个节点（例如，a）应该处于折叠状态，然后我只想执行一个操作，当我点击节点时 a，树应该展开直到它的子节点有兄弟节点，并且该子节点和它的兄弟节点都应该处于折叠状态。

一个例子：

a 有一个孩子 b (a-b)

b 有一个孩子 b1, (a-b-b1)

b1 有一个孩子 b2，(a-b-b1-b2)

b2 有两个孩子 b3 和 b4 (a-b-b1-b2-b3&b4)，

b3 有一个孩子 b5 (a-b-b1-b2-b3-b5)

b4 有一个孩子 b6 (a-b-b1-b2-b4-b6)

b6 有两个孩子（a-b-b1-b2-b4-b7&b8）

b7 有一个孩子 b9 (a-b-b1-b2-b4-b7-b9)

b8 有一个孩子 b10 (a-b-b1-b2-b4-b7-b10)

对应的树形结构如下： Tree

颜色表明，当我点击“a”时，它应该会自动扩展至“b3”和“b4”。同样，如果我单击“b4”，它应该会扩展到“b7”和“b8”。

HTML sn-p

<div class="container">
            <h1>Toggling</h1>
    	    <table class="table table-hover table-striped table-bordered">
                        <tr class="level_0" id="a"><td>a</td></tr>
    		    <tr class="level_1 parent_a" id="b"><td>b</td></tr>
    		    <tr class="level_2 parent_b" id="b1"><td>b1</td></tr>
    		    <tr class="level_3 parent_b1" id="b2"><td>b2</td></tr>
    		    <tr class="level_4 parent_b2" id="b3"><td>b3</td></tr>
    		    <tr class="level_4 parent_b2" id="b4"><td>b4</td></tr>
    		    <tr class="level_5 parent_b3" id="b5"><td>b5</td></tr>
    		    <tr class="level_5 parent_b4" id="b6"><td>b6</td></tr>
    		    <tr class="level_6 parent_b6" id="b7"><td>b7</td></tr>
    		    <tr class="level_6 parent_b6" id="b8"><td>b8</td></tr>
    		    <tr class="level_7 parent_b7" id="b9"><td>b9</td></tr>
    		    <tr class="level_7 parent_b8" id="b10"><td>b10</td></tr>
    	    </table>
</div>

jQuery sn-p

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

jQuery(function ($) {
	var treeTable = {
		parentClassPrefix : '',
		collapsedClass : 'expanded',
		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_');
});

执行可以在JSFiddleLink中看到。 注意：可以通过点击节点a来监控更改。

现在，我想知道我应该在 jQuery 中进行哪些更改以实现扩展直到 sibling node 所需的输出，如前所述。

Answer 1

var store={};
$(document).ready(function(){
$('tr').each(function(i,ele){
 dt=$(ele).data(),child=$(ele).attr('id')
if(!store[dt.parent]){
    store[dt.parent]=[];
}
store[dt.parent].push(child);
});

//console.log(store);//your hierarchy object is ready
  //uncoment and check

$('table').on('click', 'tr', function () { 
                $('tr').removeClass('expand');
                toggleRowChildren($(this));
});

function toggleRowChildren(startNode){
    var id=startNode.attr('id');
    startNode.addClass('expand');
    if(typeof store[id]==='undefined'){
        //this is the last leaf node nothing to expand
        return;
    }
    if(store[id].length>1){
        var leafNodes=store[id];
        for (var i = 0; i < leafNodes.length; i++) {
            $('#'+leafNodes[i]).addClass('expand');
        }
    }else{
        var childId=store[id][0];
        toggleRowChildren($('#'+childId));
    }
}
})

.expand td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
   <div class="container">
            <h1>Toggling</h1>
            <table class="table table-hover table-striped table-bordered">
                <tr  data-parent='HEAD' class="level_0" id="a"><td>a</td></tr>
                <tr  data-parent='a' class="level_1 parent_a" id="b"><td>b</td></tr>
                <tr  data-parent='b'   class="level_2 parent_b" id="b1"><td>b1</td></tr>
                <tr  data-parent='b1'   class="level_3 parent_b1" id="b2"><td>b2</td></tr>
                <tr  data-parent='b2'   class="level_4 parent_b2" id="b3"><td>b3</td></tr>
                <tr  data-parent='b2'   class="level_4 parent_b2" id="b4"><td>b4</td></tr>
                <tr  data-parent='b3'   class="level_5 parent_b3" id="b5"><td>b5</td></tr>
                <tr  data-parent='b4'   class="level_5 parent_b4" id="b6"><td>b6</td></tr>
                <tr  data-parent='b6'   class="level_6 parent_b6" id="b7"><td>b7</td></tr>
                <tr  data-parent='b6'   class="level_6 parent_b6" id="b8"><td>b8</td></tr>
                <tr  data-parent='b7'   class="level_7 parent_b7" id="b9"><td>b9</td></tr>
                <tr  data-parent='b8'   class="level_7 parent_b8" id="b10"><td>b10</td></tr>
            </table>
</div>