Jquery树形表格结构插件（一般用于分类，比如编辑商品的分类、文章的分类等）

最新推荐文章于 2022-05-18 00:48:03 发布

yanfeng918

最新推荐文章于 2022-05-18 00:48:03 发布

阅读量1.8k

点赞数

分类专栏： Jquery插件

本文链接：https://blog.csdn.net/yanfeng918/article/details/39372829

版权

Jquery插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用步骤：

1.去官网下载这个插件，点击下载，导入相应的文件；

注意：在引入css的时候多加了theme.default.css这个文件，可以更美观，强烈推荐使用；

注意：不要忘记加入Jquery

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多加上几个列，可以显示更多的信息，例如，可以加个编辑删除的列；

b.data--tt-id这个属性代表本身节点的id，只能够唯一一个，但是data-tt-parent-id代表这个节点的父类的id，

c.严格按照一定的顺序展示节点，比如A节点的子节点a、b、c，必须紧紧跟在A节点的后面出现；

d.最后调用$("#example-basic-expandable").treetable({ expandable: true });