December 18, 2018

jQuery 插件：创建可折叠行的table， jQuery To Create Collapsible Bootstrap Tables – Bootstrap TreeFy

By Gideon Javascript /Jquery / React / Bootstrap / Web 0 Comments

直接下载：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'

});

jQuery 插件：创建可折叠行的table， jQuery To Create Collapsible Bootstrap Tables - Bootstrap TreeFy — jQuery 插件：创建可折叠行的table， jQuery To Create Collapsible Bootstrap Tables – Bootstrap TreeFy

完整示例：

<!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