treetable

最新推荐文章于 2024-08-10 08:29:21 发布
最新推荐文章于 2024-08-10 08:29:21 发布
阅读量125 收藏
点赞数
文章标签： ui javascript ViewUI
原文链接：http://www.cnblogs.com/shuihanxiao/p/10413454.html
版权 
<!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文件

转载于:https://www.cnblogs.com/shuihanxiao/p/10413454.html

weixin_30917213
关注
Tree Table 树形表格
qq_60976312的博客
12-09 2772
vue-table-with-tree-grid
treetable-tabletree
12-12
使用jquery编写的treetable，可以动态的增加修改删除更新节点，所以会用到jquery的ajax，具体可参考 http://blog.csdn.net/BlueSuperMan/archive/2008/12/12/3504063.aspx
jQuery TreeTable 使用教程
最新发布
gitblog_00768的博客
08-10 471
jQuery TreeTable 使用教程 jquery-treetablejQuery plugin to show a tree structure in a table项目地址:https://gitcode.com/gh_mirrors/jq/jquery-treetable 项目介绍 jQuery TreeTable 是一个用于 jQuery 的插件，它可以将普通的 HTML 表格转换...
tree-table 树形表格
m0_62351775的博客
02-10 1038
首先先下载 cnpm i vue-table-with-tree-grid --S <!-- data数据 必须是树形结构 --> <!-- columns 设置属性 --> <!-- border边框 --> <!-- show-row-hover="false" 高亮显示为false --> <!-- selection-type="false 有>箭头，可以展开 --> <!-- expand-type="false 有复选框
layui树形表格treetable.css
04-29
layui树形表格treetable.css插件，基于layui第三方开发的一款树形表格插件，很实用。
用javascript实现的TreeTable, 可以当做树(Tree)用
03-18
经过压缩和混淆的TreeTable.js 博文链接：https://tianlihu.iteye.com/blog/678403
Layui的树形表格treeTable
06-20
在Layui中，树形表格（treeTable）是一种非常实用的功能，它将传统的表格与树状结构相结合，适用于展示具有层级关系的数据，如部门结构、文件目录等。下面我们将深入探讨Layui的treeTable，以及如何实现无限层级的树...
angular-treetable:AngularJS 的 Treetable 模块
07-08
script src =" jquery.treetable.js " > </ script > <!-- See http://plugins.jquery.com/treetable/ --> < link rel =" stylesheet " type =" text/css " href =" jquery.treetable.css " /&gt...
treetable-js:JavaScript Treetable 实现
06-06
树表.js treetable.js 是 Treetable 的 JavaScript 实现，没有任何外部依赖项。 作者和贡献者 @jahe 支持或联系 使用 treetable.js 时遇到问题？ 联系我，我帮你解决。
Layui树形表格treetable
12-13
在这些组件中，树形表格（TreeTable）是一个功能强大的工具，尤其适用于展示具有层级关系的数据。在本篇文章中，我们将深入探讨如何在LayUI中实现和使用TreeTable。 首先，LayUI的TreeTable是在基础的数据表格...
jquery-treetable
10-30
《jQuery TreeTable：构建动态树形表格的利器》 在Web开发中，数据展示的方式多种多样，其中树形表格作为一种高效的数据组织形式，被广泛应用于各类管理界面和数据展示场景。今天我们将深入探讨jQuery TreeTable...
用jQuery的treetable实现的树形table
10-25
用jQuery的treetable实现的树形table
树形表格 treetable 完整版 带演示demo例子
12-15
对网上的树形表格treeTable进行了二次开发扩展，带演示demo例子
jquery.treetable.js
07-25
jquery.treetable,.js下载.基于jquery的表格插件,table,表格,treetable,资源下载
tree-table：一个树状菜单的表格
02-16
ru-merge-cell 描述 合并单元格的表格以及操作 安装 npm安装ru-merge-cell 使用说明 import Table form 'ru-merge-cell' var table = new Table ( container )
treeTable树形显示
11-05
这是js实现的treeTable插件，是从jeesite中剥离出来的，通过里面的jsp页面以及Demo可以知道如何使用
LAYUI 树形表格（tree table）
qq_17627195的博客
12-22 2693
属性表格，主要是引入了下面的JS，文档里面也很详细 下载地址：https://gitee.com/whvse/treetable-lay 案例地址：https://whvse.gitee.io/treetable-lay/demo/ 文档地址：https://gitee.com/whvse/treetable-lay/wikis/pages 先上一张效果图吧 下面贴一下代码： // 记得引入LAYUI layui.config({ // treeTable.js 的根目录 base: '_
java 表格树_00030-layui+java 树形表格treeTable
weixin_28689507的博客
02-12 154
下载后，treeTable.js、treeTable.css 的放置目录分别为：layuiadmin/modules/treeTable.jslayuiadmin/modules/treeTable/treeTable.css页面元素：定义：layui.config({base: '${ctxLayui}/layuiadmin/'}).extend({index: 'lib/index'}).us...
jquery treetable
yangzlgg的专栏
09-27 568
http://plugins.jquery.com/project/treeTable
treetable demo
11-01
treetable demo是一种用于展示层次化数据的表格展示控件。它的特点是可以通过树形结构表现数据的层次关系，给用户提供清晰的数据展示和操作界面。 在treetable demo中，数据可以被组织成一棵树状结构，每个节点代表一个数据项。节点可以有子节点，形成多层级的树结构。每个节点都可以包含不同的数据字段，用来存储和展示相关信息。 使用treetable demo可以带来许多好处。首先，它可以方便地展示大量的层次化数据，使用户能够快速浏览和理解数据的结构和关系。其次，通过展开和收起节点，用户可以灵活地控制数据的显示和隐藏，使界面更加简洁和易于使用。此外，treetable demo还通常提供了一些功能，如排序、筛选和编辑，帮助用户对数据进行操作和分析。 为了使用treetable demo，我们需要提供一个数据源，其中定义了需要展示的数据和数据的层次关系。根据数据源，treetable demo可以生成对应的表格，并在界面中展示出来。用户可以通过与表格的交互来进行数据的操作和查看，例如展开和收起节点、排序列、编辑数据等。 总而言之，treetable demo是一种功能强大的表格展示控件，通过树形结构展示数据的层次关系，让用户能够更好地理解和操作数据。它可以广泛应用于各种需要展示层次化数据的场景，如组织结构、文件系统等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值