
A simple tree table plugin with jQuery to create a tree structure in your HTML table that enables you to collapse & expand nested table rows with minus and plus buttons.
The plugin also has the ability to store the current collapse/expand state in the local using HTML5 local storage or session storage.
Install & download:
# NPM $ npm install @kanety/jquery-simple-tree-table --save
How to use it:
1. Assian node ID and parent ID to the table rows as follows:
<table id="basic"> <tr data-node-id="1"> <td>1</td> <td>text of 1</td> </tr> <tr data-node-id="1.1" data-node-pid="1"> <td>1.1</td> <td>text of 1.1</td> </tr> <tr data-node-id="1.1.1" data-node-pid="1.1"> <td>1.1.1</td> <td>text of 1.1.1</td> </tr> <tr data-node-id="1.1.2" data-node-pid="1.1"> <td>1.1.2</td> <td>text of 1.1.2</td> </tr> <tr data-node-id="1.2" data-node-pid="1"> <td>1.2</td> <td>text of 1.2</td> </tr> <tr data-node-id="1.2.1" data-node-pid="1.2"> <td>1.2.1</td> <td>text of 1.2.1</td> </tr> <tr data-node-id="1.2.2" data-node-pid="1.2"> <td>1.2.2</td> <td>text of 1.2.2</td> </tr> <tr data-node-id="2"> <td>2</td> <td>text of 2</td> </tr> <tr data-node-id="2.1" data-node-pid="2"> <td>2.1</td> <td>text of 2.1</td> </tr> <tr data-node-id="2.2" data-node-pid="2"> <td>2.2</td> <td>text of 2.2</td> </tr> </table>
2. Create 2 buttons to expand and collapse all the table rows at a time.
<button type="button" id="expander">Expand All</button> <button type="button" id="collapser">Collapse All</button>
3. Import jQuery library together withe the jQuery simple-tree-table plugin's files into the page.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="jquery-simple-tree-table.js"></script> <link rel="stylesheet" href="jquery-simple-tree-table.css"></script>
4. Initailize the plugin on the HTML table and done.
$('#basic').simpleTreeTable({ expander: $('#expander'), collapser: $('#collapser') });
5. Determin whether to collapse all nodes on page load.
$('#collapsed').simpleTreeTable({ collapsed: true // default: false });
6. Determin whether to store the current state.
$('#collapsed').simpleTreeTable({ storeState: true, storeKey: NAMESPACE, storeType: 'session' // or local });
7. Callback functions available.
$('#collapsed').simpleTreeTable({ onOpen: function($node) { $('#message').append("opened " + $node.data('node-id') + " "); }, onClose: function($node) { $('#message').append("closed " + $node.data('node-id') + " "); } });
This awesome jQuery plugin is developed by kanety. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 10.12.2018
- Source