Jquery treeview - 如何通过单击按钮展开/折叠给定的单个节点

时间：2015-09-17 15:55:06

标签： javascript jquery html treeview jstree

这是我的第一个问题。我使用Jquery treeview。我已经创建了一个树视图，当我使用鼠标单击父节点时，它展开得很好。但我真的想通过单击按钮来扩展每个父节点。此代码显示了我如何创建树视图。

＆＃13;
＆＃13; 
body, a {
    color: #3B4C56;
    font-family: sans-serif;
    font-size: 14px;
    text-decoration: none;
}

a{
	cursor:pointer;
}
.tree ul {
    list-style: none outside none;
}
.tree li a {
    line-height: 25px;
}
.tree > ul > li > a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree li.parent > a {
    padding: 0 0 0 28px;
}
.tree li.parent > a:before {
    <!--background-image: url("../images/plus_minus_icons.png"); -->
    background-position: 25px center;
     content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}
.tree ul li.active > a:before {
    background-position: 0 center;
}
.tree ul li ul {
    border-left: 1px solid #D9DADB;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}
.tree ul li ul li {
    position: relative;
}
.tree ul li ul li:before {
    border-bottom: 1px dashed #E2E2E3;
    content: "";
    left: -20px;
    position: absolute;
    top: 12px;
    width: 15px;
}
#wrapper {
    
    width: 400px;
}
＆＃13; 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Note: IE8 supports the content property only if a !DOCTYPE is specified. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<link rel="stylesheet" href="treeStyles.css">
	<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" > </script>
	
	<script type="text/javascript">

	$( document ).ready( function( ) {
				$( '.tree li' ).each( function() {
						if( $( this ).children( 'ul' ).length > 0 ) {
								$( this ).addClass( 'parent' );     
						}
				});
				
                /* $( '.tree li.parent > a' ).click( function( ) {
						$( this ).parent().toggleClass( 'active' );
						$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
				});*/
				
				
            
    $('#button1')
    .unbind('click')
    .click( function() {
        $('.tree li.parent > a').parent().toggleClass( 'active' );
        $('.tree li.parent > a').parent().children( 'ul' ).slideToggle( 'fast' );
});		
});
 /*       
$('#button1').click(function(){
    $('#li_1').children('ul').slideToggle( 'fast' ); 
}),
$('#button2').click(function(){
    $('#li_2').children('ul').toggle(); 
});  */       
        
	</script>
</head>
<body>
<div id="wrapper">
    
<div class="tree">
		
   <ul id="list">
        <div tabindex="-1" id="1">
		  <li id="li_1"><a>TestSuite 1</a>
		  	<ul>
                <div tabindex="-1" id="11"><li><a>Test 1 1 Started</a></li></div>
                <div tabindex="-1" id="12"><li><a>Test 1 1 Passed</a></li></div>
                <div tabindex="-1" id="13"><li><a>Test 1 2 Started</a></li></div>
                <div tabindex="-1" id="14"><li><a>Test 1 2 Failed</a></li></div>
                <div tabindex="-1" id="15"><li><a>Test 1 3 Started</a></li></div>
                <div tabindex="-1" id="16"><li><a>Test 1 3 Passed</a></li></div>
		  	</ul>
		  </li>
       </div> 
       
       <div tabindex="-1" id="2">
		  <li id="li_2"><a>TestSuite 2</a>
		  	<ul>
                <div tabindex="-1" id="21"><li><a>Test 2 1 Started</a></li></div>
                <div tabindex="-1" id="22"><li><a>Test 2 1 Passed</a></li></div>
                <div tabindex="-1" id="23"><li><a>Test 2 2 Started</a></li></div>
                <div tabindex="-1" id="24"><li><a>Test 2 2 Failed</a></li></div>
		  	</ul>
		  </li>
       </div>
  </ul>
    
</div>
    
</div>
    
<br><br>
<input type="button" class="buttonLoad" id="button1" value="Expand TestSuite 1" /> 
<input type="button" class="buttonLoad" id="button2" value="Expand TestSuite 2" />     
    
<script>
 /*   
function myLoadFunction1(){
    //expand TestSuite1
    openMyOwnBranchInTree(li_1);
}
  
function myLoadFunction2(){
    //expand TestSuite2
    openMyOwnBranchInTree(li_2);
}
    
function openMyOwnBranchInTree(idLeaf) { 
        $('#table' + idLeaf).parents('li').show(); 
}    
  */   
    
</script>    

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这里我使用myLoadFunction1（）和myLoadFunction2（）函数以编程方式展开/折叠每个TestSuite。我还需要通过引用它的id来展开/折叠节点。

我尝试使用openMyOwnBranchInTree（）函数展开/折叠每个父节点，但它不起作用。如何改进我的代码以获得我的结果或是否有任何简单的方法来完成这项任务？ 建议是受欢迎的.. 谢谢。

编辑。

我尝试了下面的代码。（编辑上面的代码并通过注释行来显示我改变的位置。）我评论了myLoadFunction1（）和myLoadFunction2（）函数，并添加了jquery代码。

现在＃button1展开/折叠所有子节点..但是如何去我的目标？可以请任何人帮助我吗？ 谢谢。

2 个答案:

答案 0 :(得分：0)

您可以使用以下方式打开/关闭列表：

    $list1 = $('#li_1').children('ul'); //cache your variables
    $list2 = $('#li_2').children('ul');

    $('#button1').click(function(){
      $list1.slideToggle( 'fast' );
      $list2.hide();
    }),
    $('#button2').click(function(){
      $list2.slideToggle( 'fast' );
      $list1.hide();
    });

添加小提琴https://jsfiddle.net/twrmkqug/。

答案 1 :(得分：0)

最后我自己找到答案...... :) 我们可以使用JQuery来完成这项任务。不需要javascript。 这是代码.. 

body, a {
    color: #3B4C56;
    font-family: sans-serif;
    font-size: 14px;
    text-decoration: none;
}

a{
	cursor:pointer;
}
.tree ul {
    list-style: none outside none;
}
.tree li a {
    line-height: 25px;
}
.tree > ul > li > a {
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}
.tree li.parent > a {
    padding: 0 0 0 28px;
}
.tree li.parent > a:before {
    <!--background-image: url("../images/plus_minus_icons.png"); -->
    background-position: 25px center;
     content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}
.tree ul li.active > a:before {
    background-position: 0 center;
}
.tree ul li ul {
    border-left: 1px solid #D9DADB;
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}
.tree ul li ul li {
    position: relative;
}
.tree ul li ul li:before {
    border-bottom: 1px dashed #E2E2E3;
    content: "";
    left: -20px;
    position: absolute;
    top: 12px;
    width: 15px;
}
#wrapper {
    
    width: 400px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Note: IE8 supports the content property only if a !DOCTYPE is specified. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<link rel="stylesheet" href="treeStyles.css">
	<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" > </script>
	
	<script type="text/javascript">

	$( document ).ready( function( ) {
				$( '.tree li' ).each( function() {
						if( $( this ).children( 'ul' ).length > 0 ) {
								$( this ).addClass( 'parent' );     
						}
				});				
            
    $('#button1')
    .unbind('click')
    .click( function() {
        $('#li_1 > a').parent().toggleClass( 'active' );
        $('#li_1 > a').parent().children( 'ul' ).slideToggle( 'fast' );
    });		
     
    
     $('#button2')
    .unbind('click')
    .click( function() {
        $('#li_2 > a').parent().toggleClass( 'active' );
        $('#li_2 > a').parent().children( 'ul' ).slideToggle( 'fast' );
    });		
    });    
        
</script>
    
</head>
<body>
<div id="wrapper">
    
<div class="tree">
		
   <ul id="list">
        <div tabindex="-1" id="1">
		  <li id="li_1"><a>TestSuite 1</a>
		  	<ul>
                <div tabindex="-1" id="11"><li><a>Test 1 1 Started</a></li></div>
                <div tabindex="-1" id="12"><li><a>Test 1 1 Passed</a></li></div>
                <div tabindex="-1" id="13"><li><a>Test 1 2 Started</a></li></div>
                <div tabindex="-1" id="14"><li><a>Test 1 2 Failed</a></li></div>
                <div tabindex="-1" id="15"><li><a>Test 1 3 Started</a></li></div>
                <div tabindex="-1" id="16"><li><a>Test 1 3 Passed</a></li></div>
		  	</ul>
		  </li>
       </div> 
       
       <div tabindex="-1" id="2">
		  <li id="li_2"><a>TestSuite 2</a>
		  	<ul>
                <div tabindex="-1" id="21"><li><a>Test 2 1 Started</a></li></div>
                <div tabindex="-1" id="22"><li><a>Test 2 1 Passed</a></li></div>
                <div tabindex="-1" id="23"><li><a>Test 2 2 Started</a></li></div>
                <div tabindex="-1" id="24"><li><a>Test 2 2 Failed</a></li></div>
		  	</ul>
		  </li>
       </div>
  </ul>
    
</div>
    
</div>
    
<br><br>
<input type="button" class="buttonLoad" id="button1" value="Expand TestSuite 1" /> 
<input type="button" class="buttonLoad" id="button2" value="Expand TestSuite 2" />     

</body>
</html>

相关问题
最新问题