用jQuery的treetable实现的树形table_jquerytreetable,treetable资源-CSDN下载

共6个文件

css：3个

js：2个

html：1个

treetable

2星需积分: 50 179 浏览量 2016-10-25 12:47:33 上传评论收藏 44KB ZIP 举报

在IT领域，jQuery的treetable插件是一个非常实用的工具，它允许开发者将普通的HTML表格转换为可展开和折叠的树形结构。这个插件极大地增强了数据展示的层次感和交互性，尤其适用于需要展示层级关系数据的情况，如组织结构、文件系统或者分类目录等。下面将详细探讨如何使用jQuery的treetable来实现树形table。我们需要理解treetable的基本概念。TreeTable是一种结合了表格和树状视图的数据展示方式，它在每个表格行中添加了一个展开/折叠按钮，使得用户可以展开或隐藏子级行。通过这种方式，我们可以有效地管理大量具有层级关系的数据，使得界面更加整洁且易于操作。使用jQuery的treetable插件，你需要先确保已经引入了jQuery库和treetable的JavaScript文件。通常，这可以通过在HTML文件中添加script标签来完成。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/jquery.treetable.js"></script> ``` 接下来，我们需要设置一个普通的HTML表格，并为每一行分配一个唯一的ID以及一个表示其层级关系的数据属性。这个属性通常命名为`data-parent`，值为父行的ID。例如： ```html <table id="myTreeTable"> <tr data-tt-id="1" data-tt-parent-id="0"> <td>父节点1</td> </tr> <tr data-tt-id="2" data-tt-parent-id="1"> <td>子节点1.1</td> </tr> <tr data-tt-id="3" data-tt-parent-id="1"> <td>子节点1.2</td> </tr>  </table> ``` 一旦HTML结构准备完毕，我们就可以通过JavaScript初始化treetable。在文档加载完成后，调用`.treetable()`方法： ```javascript $(document).ready(function() { $("#myTreeTable").treetable({ expandable: true, // 允许展开和折叠 initialState: "collapsed" // 初始化状态，可以是"expanded"或"collapsed" }); }); ``` 以上代码会将`#myTreeTable`表格转换为一个可展开和折叠的树形table。`expandable: true`参数启用展开和折叠功能，而`initialState: "collapsed"`则表示初始状态下所有子节点都是折叠的。进一步，treetable还支持一些高级功能，如排序、搜索和自定义样式。例如，你可以通过以下方式设置排序： ```javascript $("#myTreeTable").treetable("sort", "column_name", "asc" || "desc"); ``` 其中`column_name`是你希望根据哪一列进行排序，`asc`或`desc`分别代表升序和降序。至于搜索，treetable插件提供了一个简单的文本输入框，用户可以输入关键词进行过滤： ```html <input type="text" id="searchInput" onkeyup="filterTable()" placeholder="搜索..."> ``` 然后在JavaScript中定义过滤函数： ```javascript function filterTable() { var input = document.getElementById("searchInput"); var filter = input.value.toUpperCase(); var table = document.getElementById("myTreeTable"); var tr = table.getElementsByTagName("tr"); for (var i = 0; i < tr.length; i++) { var td = tr[i].getElementsByTagName("td")[0]; if (td) { var txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } ``` 关于自定义样式，可以通过CSS来调整展开/折叠按钮、行高亮等样式。例如： ```css .tt-collapsible { cursor: pointer; /* 设置展开/折叠按钮的鼠标指针样式 */ } .tt-expandable:before { content: "+"; /* 默认展开图标 */ } .tt-collapsed:before { content: "-"; /* 展开后折叠图标 */ } .tt-row-expanded { background-color: #f5f5f5; /* 高亮显示已展开的行 */ } ``` 总结来说，jQuery的treetable插件为Web开发提供了方便的方式来呈现和操作具有层级结构的数据。通过合理的HTML结构、JavaScript初始化以及可能的扩展功能，我们可以创建出功能强大且用户友好的树形table。这个插件的灵活性和易用性使其成为许多项目中的首选解决方案。

资源推荐

资源详情

资源评论

收起资源包目录

treetable的例子.zip （6个子文件）

treetable的例子

jquery.js 91KB

css

screen.css 431B

jquery.treetable.theme.default.css 29KB

jquery.treetable.css 652B

jquery.treetable.js 16KB

index.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery treetable</title> <link rel="stylesheet" href="css/screen.css" media="screen" /> <link rel="stylesheet" href="css/jquery.treetable.css" /> <link rel="stylesheet" href="css/jquery.treetable.theme.default.css" /> </head> <body> <div id="main"> <table id="example-advanced"> <caption> <a href="#" onclick="jQuery('#example-advanced').treetable('expandAll'); return false;">Expand all</a> <a href="#" onclick="jQuery('#example-advanced').treetable('collapseAll'); return false;">Collapse all</a> </caption> <thead> <tr> <th>Name</th> <th>Kind</th> <th>Size</th> </tr> </thead> <tbody> <tr data-tt-id='1'><td><span class='file'>Acknowledgements.rtf</span></td><td>File</td><td>480.95 KB</td></tr> <tr data-tt-id='2'><td><span class='folder'>CHUD</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='2-1' data-tt-parent-id='2'><td><span class='folder'>amber</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='2-1-1' data-tt-parent-id='2-1'><td><span class='file'>AmberTraceFormats.pdf</span></td><td>File</td><td>124.46 KB</td></tr> <tr data-tt-id='2-2' data-tt-parent-id='2'><td><span class='folder'>BigTop</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='2-2-1' data-tt-parent-id='2-2'><td><span class='file'>BigTopUserGuide.pdf</span></td><td>File</td><td>1314.71 KB</td></tr> <tr data-tt-id='2-3' data-tt-parent-id='2'><td><span class='folder'>Saturn</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='2-3-1' data-tt-parent-id='2-3'><td><span class='file'>SaturnUserGuide.pdf</span></td><td>File</td><td>694.29 KB</td></tr> <tr data-tt-id='2-4' data-tt-parent-id='2'><td><span class='folder'>simg4</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='3'><td><span class='folder'>DocSets</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='3-1' data-tt-parent-id='3'><td><span class='folder'>com.apple.ADC_Reference_Library.CoreReference.docset</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='3-1-1' data-tt-parent-id='3-1'><td><span class='folder'>Contents</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='3-1-1-1' data-tt-parent-id='3-1-1'><td><span class='file'>Info.plist</span></td><td>File</td><td>1.23 KB</td></tr> <tr data-tt-id='3-1-1-2' data-tt-parent-id='3-1-1'><td><span class='folder'>Resources</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='3-1-1-3' data-tt-parent-id='3-1-1'><td><span class='file'>version.plist</span></td><td>File</td><td>0.44 KB</td></tr> <tr data-tt-id='4'><td><span class='file'>iPhone SDK License.rtf</span></td><td>File</td><td>37.93 KB</td></tr> <tr data-tt-id='5'><td><span class='folder'>Perl</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='5-1' data-tt-parent-id='5'><td><span class='folder'>wxPerl</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='5-1-1' data-tt-parent-id='5-1'><td><span class='file'>INSTALL.pod</span></td><td>File</td><td>8.26 KB</td></tr> <tr data-tt-id='5-1-2' data-tt-parent-id='5-1'><td><span class='file'>todo.txt</span></td><td>File</td><td>2.3 KB</td></tr> <tr data-tt-id='6'><td><span class='folder'>Python</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='6-1' data-tt-parent-id='6'><td><span class='folder'>PyObjC</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='6-2' data-tt-parent-id='6'><td><span class='folder'>wxPython</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='7'><td><span class='folder'>RubyCocoa</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='8'><td><span class='folder'>wxWidgets</span></td><td>Folder</td><td>--</td></tr> <tr data-tt-id='9'><td><span class='file'>Xcode Tools License.rtf</span></td><td>File</td><td>18.79 KB</td></tr> </tbody> </table> </div> <script src="jquery.js"></script> <script src="jquery.treetable.js"></script> <script> $("#example-basic").treetable({ expandable: true }); $("#example-basic-static").treetable(); $("#example-basic-expandable").treetable({ expandable: true }); $("#example-advanced").treetable({ expandable: true }); // Highlight selected row $("#example-advanced tbody").on("mousedown", "tr", function() { $(".selected").not(this).removeClass("selected"); $(this).toggleClass("selected"); }); $("form#reveal").submit(function() { var nodeId = $("#revealNodeId").val() try { $("#example-advanced").treetable("reveal", nodeId); } catch(error) { alert(error.message); } return false; }); </script> </body> </html>

评论收藏

内容反馈