jstreegrid
Version:
grid plugin for jstree
59 lines (55 loc) • 2.21 kB
HTML
<script type="text/javascript">
$(document).ready(function(){
var data = [{ "id" : "Root", "parent" : "#", "text" : "Root"}], i;
for (i=1; i<1000; i++) {
var entry = { "id" : "child"+i, "parent" : "Root", "text" : "child"+i, "data" : { "one" : i+" one", "two" : i+" two", "three" : i+" three"}};
data.push(entry);
for (var j = 0; j < 50; j++) {
var id = i.toString() + "-" + j.toString();
var centry = { "id": "child" + id, "parent": entry.id, "text": "child" + id, "data": { "one": id + " one", "two": id + " two", "three": id + " three" } };
data.push(centry);
}
}
$('#jstree').jstree({
"core" : { "data" : data },
"plugins" : [ "search", "grid" ],
"grid" : { columns: [
{width: 200, header: "name"},
{width: 200, header: "one", value: "one"},
{width: 200, header: "two", value: "two"},
{width: 200, header: "three", value: "three"}
]
}
});
$("#jstree").on("search-complete.jstree-grid", function (event,params) {
$("#timecount").text((params||{}).time);
});
$('#gosearch').click(function () {
var v = $('#treeSearch').val();
$('#jstree').jstree(true).search(v);
});
});
</script>
<style>
.columnSearchFields input {
/*
* some magic numbers. not important for this example.
* they make sure the search boxes in this example are located underneath their respective column
*/
width: 175px;
margin: 0 3px;
}
</style>
<h2>Large Data Set Search</h2>
<div>
Should display how long it takes to perform the search. Note that it does it in a crude fashion using a custom event. For true testing, use a profiler.<p/>
<b>Will only search when you press the "Search" button.</b>
</div>
<div>
Time for search: <span id="timecount"></span> milliseconds
</div>
<input type="text" id="treeSearch" value="" class="input" style="margin:0em auto 1em auto; padding:4px; border-radius:4px; border:1px solid silver;" />
<input type="button" id="gosearch" value="Search"></button>
<hr/>
<div id="jstree"></div> </body>
<hr/>