jstreetable
Version:
table plugin for jstree
72 lines (63 loc) • 3.39 kB
HTML
<html>
<head>
<title>jstree treetable 3.2.0 plugin demo</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<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>
<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" : [ "checkbox", "search", "table" ],
"search" : { "show_only_matches" : false},
"table" : { 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;
$('#treeSearch').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#treeSearch').val();
$('#jstree').jstree(true).search(v);
}, 250);
});
/*
$('#treeSearch').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#treeSearch').val();
$('#jstree').jstree(true).search(v);
//hide/show table values for nodes affected by searching
var hidden = $('ul li:hidden');
var visible = $('ul li:visible');
$.each(hidden, function(i){
$('div[id*=' + hidden[i].id + ']').hide();
});
$.each(visible, function(i){
$('div[id*=' + visible[i].id + ']').show();
});
}, 500);
});
*/
});
</script>
</head>
<body>
<h2>Search issue</h2>
<input type="text" id="treeSearch" value="" class="input" style="margin:0em auto 1em auto; display:block; padding:4px; border-radius:4px; border:1px solid silver;" />
<div id="jstree"></div> </body>
</html>