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