<!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文件

treetable的更多相关文章

  1. 原创jquery插件treeTable（转）

    由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...

  2. jquery插件treetable使用

    下载后treetable插件后只需要保留jquery.treetable.css样式文件,jquery.treetable.theme.default.css皮肤文件和jquery.treetable ...

  3. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  4. treetable 前台 累计计算树值 提交后台

    treetable   累计计算树值 效果图 html  代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  5. 支持IE6的树形节结构TreeTable实际应用案例

    <script src="jquery.js" type="text/javascript"></script> <script ...

  6. 支持IE6的树形节结构TreeTable

    关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...

  7. 遍历json创建树状表（首先的前提条件是要引入jquery的jquery treeTable插件）

    "root":{ "children":[ { "name":"AA", "children":[ ...

  8. jquery treeTable插件使用细则

    简介 treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单. 优点 兼容主流浏览器: 支持IE6和IE6+, Firef ...

  9. Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

    本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...

  10. ELement-UI之树形表格（treeTable&&treeGrid）

    先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...

随机推荐

  1. bzoj4547

    矩阵乘法 看成了合并果子... 就是斐波那契数列,只是有负数的时候,先把负数变成正的,然后矩乘 矩乘还是用单位举矩阵记录快速幂的矩阵比较保险 #include<cstdio> #inclu ...

  2. VC++、MFC

    VC++.MFC最好的开源项目 介绍:介绍一下用VC++/MFC写的最好的开源项目. Sourceforge.net中有许多高质量的VC++开源项目,我列举了一些可以作为VC++程序员的参考. 正文: ...

  3. MFC类别概述

    MFC 类别主要可分为下列数大群组: ■ General Purpose classes - 提供字符串类别.数据处理类别(如数组与串行),异 常情况处理类别.文件类别...等等. ■ Windows ...

  4. HDU 2063 过山车+poj 1469

    //这是一个非常简单的匹配.其实满感觉这种算法讲道理是可以想到. //但是我们这种弱就只能先学了匈牙利算法,然后随便嗨这种题目了.没事结果都一样. //这就是匹配算法的DFS形式,有一个BFS形式的, ...

  5. python __builtins__ float类 （25）

    25.'float', 用于将整数和字符串转换成浮点数. class float(object) | float(x) -> floating point number | | Convert ...

  6. 洛谷P4199 万径人踪灭（manacher+FFT）

    传送门 题目所求为所有的不连续回文子序列个数,可以转化为回文子序列数-回文子串数 回文子串manacher跑一跑就行了,考虑怎么求回文子序列数 我们考虑,如果$S_i$是回文子序列的对称中心,那么只要 ...

  7. 洛谷 P3768 简单的数学题

    https://www.luogu.org/problemnew/show/P3768 化简一下式子,就是$\sum_{d=1}^ncalc(d)d^2\varphi(d)$ 其中$calc(d)=\ ...

  8. (转 )Unity对Lua的编辑器拓展

    转 http://blog.csdn.net/ZhangDi2017/article/details/61203505 当前版本的Unity(截至Unity5.5.x)中TextAsset类不支持后缀 ...

  9. linux给文件或目录添加apache权限

    系统环境:ubuntu11.10/apache2/php5.3.6 在LAMP环境中,测试一个简单的php文件上传功能时,发现/var/log/apache2/error.log中出现如下php警告: ...

  10. Bootstrap中的datetimepicker浅谈

    从古至今,人们都习惯用某个时间来标记某个事件的发生.我们在写管理后台的时候,重中之中也是这个时间的设置.在问题出现的时候,我们是查看日志的时候,就可以根据这个时间段来查找这个问题出现点. 在使用时间控 ...