Question

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

最初一个节点（比如 a ）应处于折叠状态，然后我只想执行一个操作，当我点击节点 a ，树应该展开，直到它的孩子有兄弟姐妹，这个孩子及其兄弟节点也应该处于折叠状态。

一个例子：

a有一个孩子b（a-b）

b有一个孩子b1，（a-b-b1）

b1有一个孩子b2，（a-b-b1-b2）

b2有两个孩子b3＆amp; b4（a-b-b1-b2-b3＆amp; b4），

b3有一个孩子b5（a-b-b1-b2-b3-b5）

b4有一个孩子b6（a-b-b1-b2-b4-b6）

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

b7有一个孩子b9（a-b-b1-b2-b4-b7-b9）

b8有一个孩子b10（a-b-b1-b2-b4-b7-b10）

相应的树结构如下： Tree

颜色表示，当我点击＆＃34; a ＆＃34;它应该扩展到＆＃34; b3＆＃34;和＆＃34; b4＆＃34;自动。同样，如果我点击＆＃34; b4＆＃34;它应该扩展到＆＃34; b7＆＃34;和＆＃34; b8＆＃34;。

HTML代码段

＆＃13;

<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>

＆＃13;

jQuery代码段

＆＃13;

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_');
});

＆＃13;

执行可以在JSFiddle Link中看到。注意：点击 a 节点即可监控更改。

现在，我想知道我应该在jQuery中做出哪些更改，以实现扩展到兄弟节点所需的输出，如前所述。

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>

扩展节点直到其孩子有兄弟姐妹

1 个答案: