Jquery的樹形表格外掛-treetable
阿新 • • 發佈：2019-02-06
首先，表明一下幾個低階錯誤：1.這個外掛是基於Jquery的，剛開始使用的時候竟然沒有引入Jquery就使用，浪費了好長時間；2.忘記了使用頁面載入完成之後呼叫；
使用步驟：
1.下載jquery-treetable這個外掛，http://ludo.cubicphuse.nl/jquery-treetable/點選開啟連結，解壓壓縮包，引入這幾個檔案；
2.編寫一個靜態的測試頁面，html程式碼如下；
3.有關說明：<!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>
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.其它的一些屬性可以參考官網；