jstreetable
Version:
table plugin for jstree
102 lines (100 loc) • 3.84 kB
HTML
<html>
<head>
<title>jstree-table plugin demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript" src="jstreetable.js"></script>
<style type="text/css">
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
body {
margin: 1em;
}
.jstree-table-wrapper {
border: 1px solid #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
// tree data
var data = [{
id: "Products",
text: "Products",
data: {},
children: [{
id: "Fruit",
text: "Fruit",
data: {},
children:[
{id: "Apple", text: "Apple", data: {price: 0.1, quantity: 20}},
{id: "Banana", text: "Banana", data: {price: 0.2, quantity: 31}},
{id: "Grapes", text: "Grapes", data: {price: 1.99, quantity: 34}},
{id: "Mango", text: "Mango", data: {price: 0.5, quantity: 8}},
{id: "Melon", text: "Melon", data: {price: 0.8, quantity: 4}},
{id: "Pear", text: "Pear", data: {price: 0.1, quantity: 30}},
{id: "Strawberry", text: "Strawberry", data: {price: 0.15, quantity: 32}}
],
'state': {'opened': true}
}, {
id: "Vegetables",
text: "Vegetables",
data: {},
children:[
{id: "Aubergine", text: "Aubergine", data: {price: 0.5, quantity: 8}},
{id: "Broccoli", text: "Broccoli", data: {price: 0.4, quantity: 22}},
{id: "Carrot", text: "Carrot", data: {price: 0.1, quantity: 32}},
{id: "Cauliflower", text: "Cauliflower", data: {price: 0.45, quantity: 18}},
{id: "Potato", text: "Potato", data: {price: 0.2, quantity: 38}}
]
}],
'state': {'opened': true}
}];
// load jstree
$("div#jstree").jstree({
plugins: ["table","dnd","contextmenu","sort"],
core: {
data: data,
check_callback: true
},
// configure tree table
table: {
columns: [
{width: 200, header: "Name"},
{width: 150, value: "price", header: "Price", format: function(v) {if (v){ return '$'+v.toFixed(2) }}},
{width: 150, value: "quantity", header: "Qty"}
],
resizable: true,
draggable: true,
contextmenu: true,
width: 500,
height: 200
}
});
});
</script>
</head>
<body>
<h2>JsTree Table Demo</h2>
This page gives a demo for using the excellent <a href="http://www.jstree.com">jstree</a> with a table.
The table is implemented as a standard jstree plugin.
Include jquery and jstree, and the plugin library jstreetable.js, and include it as a plugin.
Look at the source to this page to see how it is done.
<p>
This example demonstrates advanced features including:
</p>
<ul>
<li>Show / hide columns via context menu</li>
<li>Resizable columns</li>
<li>Column reordering</li>
<li>Draggable columns</li>
<li>Edit cells via context menu</li>
<li>Fixed height to enable scrolling</li>
<li>Cell formatting e.g. 10 => $10.00</li>
</ul>
<div id="jstree1">
<div id="jstree"></div>
</div>
</body>
</html>