如何在包含展开和折叠的html页面中创建树视图

时间：2016-10-06 08:58:55

标签： javascript jquery html treeview 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  li {
    padding-left: 0.5em;
  }

  .handle {                                                                            
    background: transparent url(/images/spacer.png);                         
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    display: block;                                                          
    float: left;                                                             
    width: 10px;                                                             
    height: 11px;                                                            
  }                                                                                    

  .collapsed {                                                                         
    background: transparent url(/images/plus-black.png);                     
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    cursor: pointer;                                                         
  }                                                                                    

  .expanded {                                                                          
    background: transparent url(/images/minus-black.png);                    
    background-repeat: no-repeat;                                            
    background-position: center bottom;                                      
    cursor: pointer;                                                         
  }     
</style>

<link rel="stylesheet" href="treeview.min.css" />
<script src="treeview.min.js"></script>

<script>

  $(document).ready(function() {
    jQuery("#tree ul").hide();

    jQuery("#tree li").each(function() {
      var handleSpan = jQuery("<span></span>");
      handleSpan.addClass("handle");
      handleSpan.prependTo(this);

      if(jQuery(this).has("ul").size() > 0) {
        handleSpan.addClass("collapsed");
        handleSpan.click(function() {
          var clicked = jQuery(this);
          clicked.toggleClass("collapsed expanded");
          clicked.siblings("ul").toggle();
        });
      }
    });
  })
</script>    

<div>
  <div id="page-header" >
    <h1>Terms and Conditions</h1>
    <div class="col-lg-7">
      <p class="bs-component">
        <a href="#" class="btn btn-primary">Expand All</a>
        <a href="#" class="btn btn-primary">Show hide regions</a>
      </p>
      <p class="bs-component">
        <a href="#" class="btn btn-primary">Collapse All</a>
        <a href="#" class="btn btn-primary">Show hide countries</a>
      </p>
    </div>
  </div>
  <div class="bs-component">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
          <td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
        </tr>
        <tr>
          <td>xxxx</td>
          <td>xxxx</td>
          <td>xxxx</td>
          <td>Comment</td>
          <td>Region</td>
          <td>Country A</td>
          <td>xxxx</td>
          <td>xxxx</td>
        </tr>
      </thead>
    </table>
  </div>
  <div id="Details" style="border:groove">
    <ul id="tree">
      <li>
        Section A
        <ul>
          <li> Line Item
            <ul>
              <li>
                <table class="table table-striped table-hover">
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                </table>

              </li>
            </ul>
          </li>

        </ul>
      </li>
    </ul>

  </div>
</div>

我需要在包含展开和折叠的html页面中创建树视图 如附图所示。enter image description here

它也应该是页面中的两个按钮，它们应该折叠所有tress，另一个应该展开它们。

此代码用于折叠和扩展行的级别，但我需要知道是否可能有一个准备好的jquery可以为我绘制的东西，并且更简单易用，而不是从构建刮

2 个答案:

答案 0 :(得分：2)

有很多jQuery插件可以实现简单的html树网格结构，可以展开和折叠。

一个好的插件是＆＃34; TreeGrid Jquery插件＆＃34;你可以用它来快速启动。 按照http://maxazan.github.io/jquery-treegrid/中的文档，您可以随时获得所需内容。

答案 1 :(得分：1)

如果您使用的是Bootstrap，则可以使用这些任务的插件和库，例如：

Bootstrap Tree View

如果您需要纯HTML / JS解决方案，请参阅以下StackOverflow答案：

How to create a menu tree using HTML

相关问题
最新问题