jQuery實現的table表制作tree樹狀折疊效果

 

我來分享一下使用table來做出tree結構。這篇文章目的只是提供給大家一個思路，還有各種各樣的類似方法可以達到同樣的效果。

這個主要用於需要顯示層級結構，同時每一個層級也要顯示多個屬性，比如名稱，排序。。。比如下面這個商品分類的層級：

主要的思想就是table嵌套table，先把html代碼放出來再做解釋：

1. <table id="listTable" class="list">
2. <thead>
3. <tr>
4. <th>名稱</th>
5. <th>排序</th>
6. </tr>
7. </thead>
8. <tbody>
9. <tr class="outer">
10. <td><span class="switch"></span><span class="ico"></span><span class="name">A</span></td>
11. <td>1</td>
12. </tr>
13. <tr class="inner">
14. <td colspan="2">
15. <table class="list">
16. <tr class="outer">
17. <td><span class="text-indent"></span><span class="switch"></span><span class="ico"></span><span class="name">B</span></td>
18. <td>2</td>
19. </tr>
20. <tr class="inner">
21. <td colspan="2">
22. <table class="list">
23. <tr class="leaf">
24. <td><span class="text-indent"></span><span class="text-indent"></span><span class="switch"></span><span class="ico"></span><span class="name">C</span></td>
25. <td>3</td>
26. </tr>
27. </table>
28. </td>
29. </tr>
30. </table>
31. </td>
32. </tr>
33. <tr class="leaf">
34. <td><span class="switch"></span><span class="ico"></span><span class="name">D</span></td>
35. <td>4</td>
36. </tr>
37. <tr class="outer">
38. <td><span class="switch"></span><span class="ico"></span><span class="name">E</span></td>
39. <td>5</td>
40. </tr>
41. <tr class="inner">
42. <td colspan="2">
43. <table class="list">
44. <tr class="leaf">
45. <td><span class="text-indent"></span><span class="switch"></span><span class="ico"></span><span class="name">F</span></td>
46. <td>6</td>
47. </tr>
48. </table>
49. </td>
50. </tr>
51. </tbody>
52. </table>

 從代碼里可以看出，我們用outer或者leaf來寫每一個層級，然后用inner來包含前一個outer的子集，需要注意的是，有一個outer，那么下一個必須是inner，這樣子才符合層級關系。

然后里面的text-indent，switch，icon用來控制縮進空間和圖片。第一層沒有text-indent，第二層一個text-indent，以此類推。。。

然后就是css:

 css沒什么說的，主要一點是下面的代碼。用來確保inner和outer的每一個單元格大小一樣，對齊

1. .list td,
2. .list th {
3. box-sizing: border-box;
4. }

這里一點不好的是，table的寬度必須為定寬，如果不是的話，可能會造成單元格不對其。。。然后就是處理各種情況下的switch和icon

最后是js:

1. function resize(){
2. $(".list thead th").each(function(index){
3. var width = $(this).width();
4. $(".list .outer td:nth-child(" + index + ")").css("width", width);
5. $(".list .leaf td:nth-child(" + index + ")").css("width", width);
6. });
7. }
8.  
9. resize();
10. $(window).resize(resize);
11.  
12. $(".switch").click(function(){
13. if($(this).parents(".outer").is(".open")){
14. $(this).parents(".outer").removeClass("open").next(".inner").removeClass("open");
15. }else{
16. $(this).parents(".outer").addClass("open").next(".inner").addClass("open");
17. }
18. });
19.  
20. $("tr.outer, tr.leaf").click(function(){
21. $("tr.focus").removeClass("focus");
22. $(this).addClass("focus");
23. });

 js中首先最重要要做的就是處理每一格的寬度，保證inner和outer每一個單元格大小一樣，對齊。

然后其實就是增加和刪除Open。

演示代碼：http://www.gbtags.com/gb/rtreplayerpreview/1014.htm 

使用table來生成類tree結構有一個極大地缺點，根據文章：http://www.gbtags.com/gb/share/5546.htm 得知，table在瀏覽器渲染的時候，是需要通過多次渲染的，所以這么多的table使用極大地影響了頁面速度。或許可以考慮使用ul, li的組合也不錯。或者dt, dl, dd都可以嘗試。

 原文鏈接：http://www.gbtags.com/gb/share/5561.htm