jstreegrid
Version:
grid plugin for jstree
124 lines (114 loc) • 4.27 kB
HTML
<script type="text/javascript">
$(document).ready(function(){
// tree data
var data;
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 }, state: { hidden: true } },
{ id: "Grapes", text: "Grapes", data: { price: 1.99, quantity: 34 } },
{ id: "Mango", text: "Mango", data: { price: 0.5, quantity: 8 }, state: { hidden: true } },
{ id: "Melon", text: "Melon", data: { price: 0.8, quantity: 4 }, state: { hidden: true } },
{ 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:[
{ text: "Aubergine", data: { price: 0.5, quantity: 8 } },
{ text: "Broccoli", data: { price: 0.4, quantity: 22 }, state: { hidden: true } },
{ text: "Carrot", data: { price: 0.1, quantity: 32 }, state: { hidden: true } },
{ text: "Cauliflower", data: { price: 0.45, quantity: 18 }, state: { hidden: true } },
{ text: "Potato", data: { price: 0.2, quantity: 38 } }
]
}, {
id: "Meat",
text: "Meat",
data: {},
children: [{
id: "Fresh",
text: "Fresh",
data: {},
children: [
{ id: "FreshPork", text: "Pork", data: { price: 1.99, quantity: 20 } },
{ id: "FreshBeef", text: "Beef", data: { price: 4.99, quantity: 31 } },
{ id: "FreshChicken", text: "Chicken", data: { price: 1.99, quantity: 34 } }
],
'state': { 'opened': true }
}, {
id: "Frozen",
text: "Frozen",
data: {},
children: [
{ id: "FrozenPork", text: "Pork", data: { price: 1.99, quantity: 20 } },
{ id: "FrozenBeef", text: "Beef", data: { price: 4.99, quantity: 31 } },
{ id: "FrozenChicken", text: "Chicken", data: { price: 1.99, quantity: 34 } }
],
'state': { 'opened': true }
}
],
'state': { 'opened': true }
}],
'state': {'opened': true}
}];
// load jstree
$("div#jstree").jstree({
plugins: ["table","dnd","contextmenu","sort","grid"],
core: {
data: data,
check_callback: true
},
// configure tree table
grid: {
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: 300
}
});
$("#hide").on("click", function () {
var text = $("#hide").text();
if (text === "Show Nodes") {
$("div#jstree").jstree().show_node("Banana");
$("div#jstree").jstree().show_node("Grapes");
$("div#jstree").jstree().show_node("Mango");
$("div#jstree").jstree().show_node("Meat");
$("#hide").text("Hide Nodes");
} else {
$("div#jstree").jstree().hide_node("Banana");
$("div#jstree").jstree().hide_node("Grapes");
$("div#jstree").jstree().hide_node("Mango");
$("div#jstree").jstree().hide_node("Meat");
$("#hide").text("Show Nodes");
}
});
$("#add").on("click",function() {
var tree =$("div#jstree").jstree();
var id= tree.create_node(tree.get_node("Products"), { id: "NewProduct", text: "NewProduct",data: {price: 100, quantity: 0}, children:[]});
});
});
</script>
<h2>API Hide/Show Test</h2>
<div id="jstree" />
<button id="hide" >
Hide Nodes
</button>
<button id="add" >
Add Product
</button>