treetable

2024-01-14 22:16:58

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/screen.css" media="screen" />
    <link rel="stylesheet" href="css/jquery.treetable.css" />
    <link rel="stylesheet" href="css/jquery.treetable.theme.default.css" />
  </head>
  <body>
  <style>
        table.treetable thead tr th{
            background:#f2f2f2 !important;
            border-top: 1px solid #ddd !important;
            border-right:1px solid #ddd !important;
            padding: 8px 10px !important;
            color: #555;
            font-weight: 700;
            text-align: center !important;
        }
        table.treetable tbody tr td{
            padding: 8px 10px !important;
            color: #555;
            text-align: center !important;
        }
        table.treetable tbody tr td:nth-of-type(1){
            text-align: left !important;
        }
        table.treetable tbody tr td a{
            text-decoration:none !important;
            color: #2fa4e7;
        }
        table.treetable tbody tr td a:hover{
            color: #157ab5;
            text-decoration: none;
        }
        table.treetable tr.selected{
              background:#ffffff !important;
              color: #000000 !important;
        }
        .table th, .table td{
            border-left: 1px solid #ddd !important;
            border-bottom: 1px solid #ddd !important;
            border-right:1px solid #ddd !important;
        }

  </style>
    <div id="main">


      <table id="example-advanced" class="example-advanced table table-striped table-bordered table-condensed tree_table">
        <thead>
          <tr>
                <th><span style="display: inline-block;width: 100%;text-align: center;padding: .2em 0 .2em 0;">栏目名称</span></th>
                <th><span>次序</span></th>
                <th><span>创建人</span></th>
                <th>是否显示到导航栏</th>
                <th>
                      操作
                </th>
          </tr>
        </thead>
        <tbody>
        <tr data-tt-id='1'>
              <td><a>商务合作</a></td>
              <td><span>0</span></td>
              <td><span>lijiaoqiao</span></td>
              <td>是</td>
              <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
            </td>
        </tr>
        <tr data-tt-id='66' data-tt-parent-id='1'>
              <td><a>商务合作</a></td>
              <td><span>0</span></td>
              <td><span>lijiaoqiao</span></td>
              <td>是</td>
              <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
              </td>
        </tr>
        <tr data-tt-id='88' data-tt-parent-id='66'>
              <td><a>商务合作</a></td>
              <td><span>0</span></td>
              <td><span>lijiaoqiao</span></td>
              <td>是</td>
              <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
              </td>
        </tr>
        <tr data-tt-id='999' data-tt-parent-id='88'>
            <td><a>商务合作</a></td>
            <td><span>0</span></td>
            <td><span>lijiaoqiao</span></td>
            <td>是</td>
            <td class="last">
                <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
            </td>
        </tr>
        <tr data-tt-id='90000' data-tt-parent-id='999'>
            <td><a>商务合作</a></td>
            <td><span>0</span></td>
            <td><span>lijiaoqiao</span></td>
            <td>是</td>
            <td class="last">
                <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
            </td>
        </tr>
        <tr data-tt-id='93000' data-tt-parent-id='999'>
            <td><a>商务合作</a></td>
            <td><span>0</span></td>
            <td><span>lijiaoqiao</span></td>
            <td>是</td>
            <td class="last">
                <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
            </td>
        </tr>
        </tbody>
      </table>

        <table id="example-advanced1" class="example-advanced table table-striped table-bordered table-condensed tree_table" >
            <thead>
            <tr>
                <th><span style="display: inline-block;width: 100%;text-align: center;padding: .2em 0 .2em 0;">栏目名称</span></th>
                <th><span>次序</span></th>
                <th><span>创建人</span></th>
                <th>是否显示到导航栏</th>
                <th>
                    操作
                </th>
            </tr>
            </thead>
            <tbody>
            <tr data-tt-id='1'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            <tr data-tt-id='66' data-tt-parent-id='1'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            <tr data-tt-id='88' data-tt-parent-id='66'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            <tr data-tt-id='999' data-tt-parent-id='88'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            <tr data-tt-id='90000' data-tt-parent-id='999'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            <tr data-tt-id='93000' data-tt-parent-id='999'>
                <td><a>商务合作</a></td>
                <td><span>0</span></td>
                <td><span>lijiaoqiao</span></td>
                <td>是</td>
                <td class="last">
                    <a href="javascript:delData('/documentCategory/doDelete?id=1')">删除</a>
                    <a href="javascript:doUrl('/documentCategory/toDetail?id=1')">详情</a>
                    <a href="javascript:doUrl('/documentCategory/toAdd?id=1&amp;addChildren=true')">添加下级栏目</a>
                </td>
            </tr>
            </tbody>
        </table>

      <!--<pre class="listing">-->
<!--$(".example-advanced").treetable({ expandable: true });-->

<!--// Highlight selected row-->
<!--$(".example-advanced tbody").on("mousedown", "tr", function() {-->
  <!--$(".selected").not(this).removeClass("selected");-->
  <!--$(this).toggleClass("selected");-->
<!--});-->

<!--// Drag & Drop Example Code-->
<!--$(".example-advanced .file, .example-advanced .folder").draggable({-->
  <!--helper: "clone",-->
  <!--opacity: .75,-->
  <!--refreshPositions: true,-->
  <!--revert: "invalid",-->
  <!--revertDuration: 300,-->
  <!--scroll: true-->
<!--});-->

<!--$(".example-advanced .folder").each(function() {-->
  <!--$(this).parents(".example-advanced tr").droppable({-->
    <!--accept: ".file, .folder",-->
    <!--drop: function(e, ui) {-->
      <!--var droppedEl = ui.draggable.parents("tr");-->
      <!--$(".example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));-->
    <!--},-->
    <!--hoverClass: "accept",-->
    <!--over: function(e, ui) {-->
      <!--var droppedEl = ui.draggable.parents("tr");-->
      <!--if(this != droppedEl[0] && !$(this).is(".expanded")) {-->
        <!--$(".example-advanced").treetable("expandNode", $(this).data("ttId"));-->
      <!--}-->
    <!--}-->
  <!--});-->
<!--});</pre>-->


    </div>

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="jquery.treetable.js"></script>
    <script>






        $(".example-advanced tbody").on("mousedown", "tr", function() {
            $(".selected").not(this).removeClass("selected");
            $(this).toggleClass("selected");
        });

      $("#example-basic").treetable({ expandable: true });

      $("#example-basic-static").treetable();

      $("#example-basic-expandable").treetable({ expandable: true });

      $(".example-advanced").treetable({ expandable: true });

      // Highlight selected row
      $(".example-advanced tbody").on("mousedown", "tr", function() {
        $(".selected").not(this).removeClass("selected");
        $(this).toggleClass("selected");
      });

      // Drag & Drop Example Code
      $(".example-advanced .file, .example-advanced .folder").draggable({
        helper: "clone",
        opacity: .75,
        refreshPositions: true, // Performance?
        revert: "invalid",
        revertDuration: 300,
        scroll: true
      });

      $(".example-advanced .folder").each(function() {
        $(this).parents(".example-advanced tr").droppable({
          accept: ".file, .folder",
          drop: function(e, ui) {
            var droppedEl = ui.draggable.parents("tr");
            $(".example-advanced").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
          },
          hoverClass: "accept",
          over: function(e, ui) {
            var droppedEl = ui.draggable.parents("tr");
            if(this != droppedEl[0] && !$(this).is(".expanded")) {
              $(".example-advanced").treetable("expandNode", $(this).data("ttId"));
            }
          }
        });
      });

      $("form#reveal").submit(function() {
        var nodeId = $("#revealNodeId").val()

        try {
          $(".example-advanced").treetable("reveal", nodeId);
        }
        catch(error) {
          alert(error.message);
        }

        return false;
      });
    </script>
  </body>
</html>



根据该html下载并引入对应的css和js文件
上一篇：whistle代理


下一篇：详解JS中DOM 元素的 attribute 和 property 属性