jstreetable
Version:
table plugin for jstree
75 lines (59 loc) • 2.2 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, trees, i, expected;
data = [{
text: "Root 1",
data: {price: "$5.00", size: "4",spanclass:"root"},
children: [
{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"}}
]}
]
}];
$("#jstree").on("resize_column.jstree-table",function (e,column,width) {
$("#colnum").text(column);
$("#size").text(width);
$("showevent").show();
});
$("#jstree").jstree(
{
htmlheader: 'Fixed Width, All Columns Defined, Columns < Width',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 100, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: 75, cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
}
);
});
</script>
</head>
<body>
<h2>Tree table Column Resize Event Test</h2>
<div id="showevent">
Column <span id="colnum">N/A</span> now has size <span id="size">UNKNOWN</span>.
</div>
<div id="jstree">
</div>
</body>
</html>