jstreetable
Version:
table plugin for jstree
66 lines (57 loc) • 2.25 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="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');
</style>
<script type="text/javascript">
$(document).ready(function(){
var data;
data = [{
text: "Root 1",
data: {price: "$5.00", size: "4",spanclass:"root"},
children: [
{id: "root 1/really long named child", text: "Really long named child whose name gets cut off", data: {price: "<b>$4.00</b>", size: "3",spanclass:"first"}},
{text: "Child 2", data: {price: "<i>$3.00</i>", size: "2",spanclass:"second"}, children:[
{text:"Grandchild",data:{price: "EXPENSIVE!",size:"10",spanclass:"third"}}
]}
]
}];
$("div#jstree").bind("loaded_table.jstree",function(){
$("span#status").text("loaded");
}).on("select_cell.jstree-table",function (e,data) {
$("span#clicked").html("clicked "+data.column+" of value "+data.value);
}).on('update_cell.jstree-table',function (e,data) {
$("span#changed").html("changed "+data.col+" from "+data.old+" to "+data.value);
});
$("div#jstree").jstree({
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: 110, header: "Nodes",title:"_DATA_"},
{cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
});
});
</script>
</head>
<body>
<h2>Tree table 3.2.0 Demo</h2>
<div id="jstree1">
<h4>First Tree</h4>
<div id="jstree"></div>
<div>Tree table is <span id="status">loading</span>.</div>
</div>
</body>
</html>