我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 查看演示下载源码 HTML 首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。 <ul class="select"> <li class="select-list"> <dl…
December 18, 2018
jQuery 插件：创建可折叠行的table， jQuery To Create Collapsible Bootstrap Tables – Bootstrap TreeFy
直接下载：jQuery-Plugin-To-Create-Collapsible-Bootstrap-Tables-Bootstrap-TreeFy
用法:
1. 引入 jQuery library 和 the jQuery Bootstrap TreeFy
<link rel="stylesheet" href="dist/css/bootstrap-treefy.css"> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="dist/bootstrap-treefy.js"></script>
2. 引入字体和必要的图标 the Font Awesome for expand / collapse icons.
<link rel="stylesheet" href="font-awesome.min.css">
3. 创建 Bootstrap 的多行表格
<table class="table table-striped" id="table">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</tr>
</thead>
<tbody>
<tr data-node="treetable-1">
<td>Node</td>
<td>1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-2" data-pnode="treetable-parent-1">
<td>Node</td>
<td>1-1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-3" data-pnode="treetable-parent-1">
<td>Node</td>
<td>1-2</td>
<td>c</td>
<td>info</td>
</tr>
</tbody>
</table>
4. 实例化插件
<script>
$(function(){
$("#table").treeFy();
})
</script>
5. 插件默认选项
$("#table").treeFy({
// Custom template
expanderTemplate: '<span class="treetable-expander"></span>',
indentTemplate: '<span class="treetable-indent"></span>',
// CSS classes for expander
expanderExpandedClass: 'fa fa-angle-down',
expanderCollapsedClass: 'fa fa-angle-right',
// Index of the column which expander should be added to.
treeColumn: 0,
// Initial CSS class
initStatusClass: 'treetable-expanded'
});
完整示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Bootstrap TreeFy Plugin Demo</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap-treefy.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" style="margin-top:150px;">
<h1 style="margin-bottom:30px; text-align:center">jQuery Bootstrap TreeFy Plugin Demo</h1>
<table class="table table-striped" id="table">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
</tr>
</thead>
<tbody>
<tr data-node="treetable-1">
<td>Node</td>
<td>1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-2" data-pnode="treetable-parent-1">
<td>Node</td>
<td>1-1</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-3" data-pnode="treetable-parent-1">
<td>Node</td>
<td>1-2</td>
<td>c</td>
<td>info</td>
</tr>
<tr data-node="treetable-4">
<td>Node</td>
<td>2</td>
<td>c</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/bootstrap-treefy.js"></script>
<script>
$(function() {
$("#table").treeFy({
treeColumn: 1
});
});
</script>
</body>
</html>
本文：jQuery 插件：创建可折叠行的table， jQuery To Create Collapsible Bootstrap Tables – Bootstrap TreeFy
Related Posts
Printing Tips – 打印网页时去页脚和页眉 Remove Header and Footer
常用JavaScript函数 71 -（自我总结）
JavaScript面向对象详解四：JQuery插件
About Author
