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

标签 javascript jquery html treeview jstree

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

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' );     
						}
				});
				
                /* $( '.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>

在这里，我使用 myLoadFunction1() 和 myLoadFunction2() 函数以编程方式展开/折叠每个 TestSuites。此外，我需要通过引用其 id 来展开/折叠节点。

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

已编辑。

我尝试了以下代码。(编辑前面的代码并通过注释该行显示我更改的位置。)我注释了 myLoadFunction1() 和 myLoadFunction2() 函数，并添加了 jquery 代码。

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

最佳答案

终于我自己找到了答案...:) 我们可以使用 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>

关于javascript - Jquery treeview-如何通过单击按钮来展开/折叠给定的单个节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32634841/

上一篇：javascript - ng-disabled 不适用于 $scope 变量

下一篇：javascript - Angular ng-model 需要

相关文章：

javascript - create-react-app 太慢并创建困惑的应用程序

javascript - 使用jquery改变div的颜色

javascript - 创建具有不同开始和结束行为的 CSS 过渡？

javascript - 以编程方式触发输入的更改事件

javascript - 用于构建 HTML5/javascript 平板电脑应用程序的框架、设计模式和库

javascript - 如何让jquery选择选项

javascript - 反馈选项卡，例如 www.monyta.com

javascript - 如果第一次未完成，则防止第二次启动功能

javascript - 使用 Jquery 警报对话框插件进行链接确认

javascript - 为什么RxJS运算符过滤和映射大尺寸数组比Javascript数组方法更快？

©2024 IT工具网  联系我们