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

来源：互联网发布：物格而后知至,知至而后编辑：程序博客网时间：2024/04/29 21:28

使用步骤：

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 });

0 0