treetables
Version:
jquery plugin extending jquery-datatables to support tree data
76 lines (70 loc) • 2.46 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="../tree-table.css"/>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<div class="btn-group">
<button class="btn btn-primary" id="expand">Expand all</button>
<button class="btn btn-primary" id="collapse">Collapse all</button>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<table id="test-table" class="table table-striped" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/datatables.net/js/jquery.dataTables.js"></script>
<script src="../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js"></script>
<script src="../treeTable.js"></script>
<script>
$(document).ready(function () {
const fakeData = [
{"tt_key": 1, "tt_parent": 0, name: "CEO", salary: 1000000},
{"tt_key": 2, "tt_parent": 1, name: "CTO", salary: 110000},
{"tt_key": 3, "tt_parent": 2, name: "Front-end developer", salary: 60000},
{"tt_key": 4, "tt_parent": 2, name: "Back-end developer", salary: 65000},
{"tt_key": 5, "tt_parent": 1, name: "CFO", salary: 100000}
];
$('#test-table').treeTable({
"data": fakeData,
"collapsed": false,
"columns": [
{
"data": "name"
},
{
"data": "salary",
render: function (data) {
return "£" + data;
}
}
],
"order": [[1, 'desc']]
});
$('#expand').on("click", function () {
$('#test-table').data("treeTable").expandAllRows().redraw();
});
$('#collapse').on("click", function () {
$('#test-table').data("treeTable").collapseAllRows().redraw();
})
})
</script>
</html>