jstreegrid
Version:
grid plugin for jstree
39 lines (34 loc) • 1.79 kB
HTML
<script type="text/javascript">
$(document).ready(function(){
var data = [{ "id" : "Root", "parent" : "#", "text" : "Root"},
{ "id" : "child1", "parent" : "Root", "text" : "child1", "data" : { "open" : "2/5/2015 2:18:00 PM", "close" : "2/6/2015 10:16:00 AM", "status" : "Closed"}},
{ "id" : "child1-1", "parent" : "child1", "text" : "child1-1", "data" : { "open" : "2/5/2015 2:18:00 PM", "close" : "2/6/2015 10:16:00 AM", "status" : "Closed"}},
{ "id" : "child2-2", "parent" : "child1", "text" : "child2-2", "data" : { "open" : "2/5/2015 2:18:00 PM", "close" : "2/6/2015 10:16:00 AM", "status" : "Closed"}},
{ "id" : "child2", "parent" : "Root", "text" : "child2", "data" : { "open" : "2/5/2015 2:18:00 PM", "close" : "2/6/2015 10:16:00 AM", "status" : "Closed"}},
{ "id" : "child3", "parent" : "Root", "text" : "child3", "data" : { "open" : "2/5/2015 2:18:00 PM", "close" : "2/6/2015 10:16:00 AM", "status" : "Closed"}}]
$('#jstree').jstree({
"core" : { "data" : data },
"plugins" : [ "grid" ],
"search" : { "show_only_matches" : false},
"grid" : { columns: [
{width: 190, header: "name"},
{width: 140, header: "open", value: "open"},
{width: 140, header: "close", value: "close"},
{width: 130, header: "status", value: "status"}
]
}
});
var to = false;
$('#hideCol').click(function () {
var ref = $("#jstree").jstree(true)
ref.grid_hide_column(1);
});
$('#showCol').click(function () {
var ref = $("#jstree").jstree(true)
ref.grid_show_column(1);
});
});
</script>
<h2>API Test</h2>
<button id="hideCol">Hide Col 1</button> <button id="showCol">Show Col 1</button>
<div id="jstree"></div>