Jquery的树形表格插件-treetable

最新推荐文章于 2025-05-28 11:06:12 发布

原创最新推荐文章于 2025-05-28 11:06:12 发布 · 9.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了jQuery TreeTable插件的使用方法，并指出了初学者常犯的几个错误，如未引入jQuery、未在页面加载完成时调用插件等。通过提供静态测试页面和具体的代码实现，帮助开发者快速上手并避免常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，表明一下几个低级错误：1.这个插件是基于Jquery的，刚开始使用的时候竟然没有引入Jquery就使用，浪费了好长时间；2.忘记了使用页面加载完成之后调用；

使用步骤：

1.下载jquery-treetable这个插件，http://ludo.cubicphuse.nl/jquery-treetable/点击打开链接，解压压缩包，引入这几个文件；

2.编写一个静态的测试页面，html代码如下；

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/jquery.treetable.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.treetable.theme.default.css" rel="stylesheet" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.treetable.js"></script>
    <script>
         $(function () {
             $("#example-basic-expandable").treetable({ expandable: true });
         })
    </script>
</head>
<body>
    
        <table id="example-basic-expandable">

        <tbody>
            <tr data-tt-id="0" >
                <td>app</td>
            </tr>
        <tr data-tt-parent-id="0" data-tt-id="1">
          <td>controllers</td>
        </tr>
        <tr data-tt-parent-id="1" data-tt-id="5">
          <td>application_controller.rb</td>
        </tr>
        <tr data-tt-parent-id="0" data-tt-id="2">
          <td>helpers</td>
        </tr>
        <tr data-tt-parent-id="0" data-tt-id="3">
          <td>models</td>
        </tr>
        <tr data-tt-parent-id="0" data-tt-id="4">
          <td>views</td>
        </tr>
      </tbody>

        </table>
</body>
   
</html>

3.有关说明：

a.添加一个table，<table id="example-basic-expandable">，这个id后面的js方法有使用；

b.data-tt-id是这个树形结构节点本身的id，每个必须有且唯一一个，不能够重复，data-tt-parent-id这个属性是代表是自己的父亲节点是谁，不同的节点可以有相同的父节点；

c.注意引入的一个jquery.treetable.theme.default.css，如果不使用，样式不太好看，但是我测试出现不能够正常使用；

d.其它的一些属性可以参考官网；