如何在按钮点击展开树视图的所有节点？

我使用li和ul格式（不使用TreeView控件）创建了一个树形视图。我想用JavaScript扩展所有节点。请帮帮我。如何在按钮点击展开树视图的所有节点？

我对树视图CSS是如下：

#sitemap, #sitemap ul, #sitemap li 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#sitemap 
{ 
    background: url(../content/images/line1.gif) repeat-y; 
} 
#sitemap li 
{ 
    line-height: 20px; 
    margin-top: 1px; 
    position: relative; 
    width: 100%; 
} 
/* IE leaves a blank space where span is added so this is to avoid that */#sitemap li 
{ 
    float: left; 
    display: inline; 
} 
#sitemap li a 
{ 
    padding-left: 3px; 
} 
#sitemap li a.but 
{ 
    padding: 1px; 
    border: solid 1px #c0c0c0; 
    color: #080808; 
    font-size: 7pt; 
    margin: 2px; 
    font-weight: normal; 
    background-color: #efefef; 
} 
#sitemap li a.butGroup 
{ 
    padding: 2px; 
    border: solid 1px #888; 
    color: #080808; 
    font-size: 7pt; 
    margin: 2px; 
    background-color: #efefef; 
    font-weight: bold; 
} 
#sitemap li span 
{ 
    float: left; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    width: 13px; 
    height: 13px; 
    cursor: auto; 
    font-size: 0; 
} 
#sitemap li span, #sitemap li span.collapsed 
{ 
    background: url(../content/images/collapsed.gif) no-repeat 0 0; 
} 
#sitemap li span.expanded 
{ 
    background: url(../content/images/expanded.gif) no-repeat 0 0; 
} 
#sitemap li span.dot 
{ 
    background: url(../content/images/line2.gif) no-repeat -5px -5px; 
} 
#sitemap li ul 
{ 
    margin-left: 25px; 
    display: block; 
    clear: both; 
    background: #fff url(../content/images/line1.gif) repeat-y; 
} 
#sitemap li li 
{ 
    background: url(../content/images/line2.gif) no-repeat 0 0; 
} 
#sitemap, #sitemap ul 
{ 
    min-height: 1%; 
} 
#sitemap:after, #sitemap ul:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
#sitemap, #sitemap ul 
{ 
    display: block; 
} 
#sitemap ul 
{ 
    display: none; 
} 
#sitemap li div.butHolder 
{ 
    clear: both; 
    margin: 10px 3px 3px 30px; 
} 
#sitemap li input[type=text] 
{ 
    width: 25px; 
    padding: 2px; 
    height: 14px; 
    border: solid 1px #888; 
    text-align: center; 
} 
div.LinkGroup 
{ 
    width: 95%; 
    margin-left: 20px; 
    text-align: left; 
    border: solid 1px #efefef; 
    background-color: #fcfcfc; 
} 
div.LinkGroup div 
{ 
    padding: 2px 1px 2px 1px; 
    font-size: 8pt; 
} 
div.TR 
{ 
    width: 100%; 
    margin-left: 20px; 
    text-align: left; 
    clear: both; 
} 
div.TR div.TH, div.TR div.TD 
{ 
    float: none; 
    min-width: 50px; 
    white-space: nowrap; 
    padding: 3px; 
}

的JavaScript：

$(document).ready 
(function() { 
    if ($("#sitemap").length > 0) { 

     $("#sitemap").find("li").each 
     (
      function() { 
       var $span = $("<span></span>"); 
       $(this).toggleClass("expanded"); 
       if ($(this).find("ul:first").length > 0) { 

        $(this).find("ul:first").css("display", "none"); 
        $span.attr("class", "collapsed"); 

        // 
        //if more link clicks of "Manage Links" page functionality than show it expanded. 
        //or delete the element show parent menu expanded 
        // 
        if (jQuery.trim($(this).find("ul:first").css("content")).indexOf('expanded') > -1) { 
         $span.removeAttr("class"); 
         $span.attr("class", "expanded"); 
         $(this).find("ul:first").css("display", "block"); 
        } 

        $span.click(function() { 
         $(this).toggleClass("expanded"); 
         $(this).parent("li").find("ul:first").slideToggle("normal"); 
        } 
        ) 

        $(this).append($span); 
       } 
       else { 
        $span.removeAttr("class"); 
        $span.attr("class", "dot"); 
        $(this).append($span); 
       } 
      } 
     ) 
    } 
} 
)

//// HTML结构

<ul id="sitemap"> 
    <li> 
     <div class='TR'> 
      <div class='TH'> 
       <input type='checkbox' id='module_1' class='module' moduleid='1' /> 
       Start Configurations</div> 
     </div> 
     <ul style='display: none;'> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_1' class='child' id='menu_1' moduleid='1' parent='0' 
          checked='checked' /> 
         Customer Registration</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_9' class='child' id='menu_9' moduleid='1' parent='0' 
          checked='checked' /> 
         Configure Project</div> 
       </div> 
       <ul style='display: none;'> 
        <li> 
         <div class='TR'> 
          <div class='TH'> 
           <input type='checkbox' name='menu_10' class='child' id='menu_10' moduleid='1' parent='9' 
            checked='checked' /> 
           Search Customer</div> 
         </div> 
        </li> 
        <li> 
         <div class='TR'> 
          <div class='TH'> 
           <input type='checkbox' name='menu_12' class='child' id='menu_12' moduleid='1' parent='9' 
            checked='checked' /> 
           Test</div> 
         </div> 
         <ul style='display: none;'> 
          <li> 
           <div class='TR'> 
            <div class='TH'> 
             <input type='checkbox' name='menu_13' class='child' id='menu_13' moduleid='1' parent='12' 
              checked='checked' /> 
             Test_Child</div> 
           </div> 
          </li> 
          <li> 
           <div class='TR'> 
            <div class='TH'> 
             <input type='checkbox' name='menu_14' class='child' id='menu_14' moduleid='1' parent='12' 
              checked='checked' /> 
             Test_Child2</div> 
           </div> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <div class='TR'> 
      <div class='TH'> 
       <input type='checkbox' id='module_2' class='module' moduleid='2' /> 
       Edit Configuration</div> 
     </div> 
     <ul style='display: none;'> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_3' class='child' id='menu_3' moduleid='2' parent='0' 
          checked='checked' /> 
         Edit Configuration</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_11' class='child' id='menu_11' moduleid='2' parent='0' 
          checked='checked' /> 
         Edit Customer Deatils</div> 
       </div> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <div class='TR'> 
      <div class='TH'> 
       <input type='checkbox' id='module_3' class='module' moduleid='3' /> 
       Administration</div> 
     </div> 
     <ul style='display: none;'> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_4' class='child' id='menu_4' moduleid='3' parent='0' 
          checked='checked' /> 
         Project Stage</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_5' class='child' id='menu_5' moduleid='3' parent='0' 
          checked='checked' /> 
         Module Management</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_6' class='child' id='menu_6' moduleid='3' parent='0' 
          checked='checked' /> 
         Question Management</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_7' class='child' id='menu_7' moduleid='3' parent='0' 
          checked='checked' /> 
         Access Group</div> 
       </div> 
      </li> 
      <li> 
       <div class='TR'> 
        <div class='TH'> 
         <input type='checkbox' name='menu_8' class='child' id='menu_8' moduleid='3' parent='0' 
          checked='checked' /> 
         User Creation</div> 
       </div> 
      </li> 
     </ul> 
    </li> 
</ul>

来源

2012-12-13 Sonam Mohite

，如果你添加一个链接到的jsfiddle，并包括HTML结构的样品这将是很好。 – nhahtdh

好的@nhahtdh .... –

//扩大

<script type="text/javascript"> 
    function fun1() { 
     if ($("#sitemap").length > 0) { 

      $("#sitemap").find("li").each 
      (
       function() { 
        var $span = $("<span></span>"); 
        //$(this).toggleClass("expanded"); 
        if ($(this).find("ul:first").length > 0) { 
         $span.removeAttr("class"); 
         $span.attr("class", "expanded"); 
         $(this).find("ul:first").css("display", "block"); 
         $(this).append($span); 
        } 

       } 
      ) 
     } 

    } 

</script>

//折叠

<script type="text/javascript"> 
    function fun() { 

     if ($("#sitemap").length > 0) { 

      $("#sitemap").find("li").each 
      (
       function() { 
        var $span = $("<span></span>"); 
        if ($(this).find("ul:first").length > 0) { 
         $(this).find("ul:first").css("display", "none"); 
         $span.attr("class", "collapsed"); 
         $(this).append($span); 
        } 

       } 
      ) 
     } 
    } 

</script>

来源

2012-12-13 06:24:33

如何在按钮点击展开树视图的所有节点？

回答

相关问题