jstreetable
Version:
table plugin for jstree
299 lines (280 loc) • 10.3 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"}}
]}
]
}];
trees = [
{
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
}
},
{
htmlheader: 'Fixed Width, All Columns Defined, Columns > Width',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 200, header: "Nodes",title:"_DATA_"},
{width: 300, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: 300, cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Fixed Width, All Columns Defined, Columns = Width',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 200, header: "Nodes",title:"_DATA_"},
{width: 150, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: 50, cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Fixed Width, All Columns Defined, One auto Column',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 110, header: "Nodes",title:"_DATA_"},
{width: 100, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: "auto", cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Fixed Width, All Columns Defined, Two auto Columns',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 110, header: "Nodes",title:"_DATA_"},
{width: "auto", cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: "auto", cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Fixed Width, One Column Undefined, Default Fixed',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columnWidth: 150,
columns: [
{width: 110, header: "Nodes",title:"_DATA_"},
{width: 100, 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
}
},
{
htmlheader: 'Fixed Width, One Column Undefined, Default Undefined',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: 110, header: "Nodes",title:"_DATA_"},
{width: 100, 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
}
},
{
htmlheader: 'Undefined Width, All Columns Defined',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 100, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: 110, cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Undefined Width, All Columns Defined, One auto Column',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 100, cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: "auto", cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Undefined Width, All Columns Defined, Two auto Columns',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: "auto", cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: "auto", cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Undefined Width, One Column Undefined, Default Fixed',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columnWidth: 100,
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 123, 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
}
},
{
htmlheader: 'Undefined Width, One Column Undefined, Default Undefined',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: 150, header: "Nodes",title:"_DATA_"},
{width: 123, 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
}
},
{
htmlheader: 'Fixed Width, Columns Percentages',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
width: 400,
columns: [
{width: '35%', header: "Nodes",title:"_DATA_"},
{width: '45%', cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: '20%', cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
},
{
htmlheader: 'Undefined Width, Columns Percentages',
plugins: ["themes","json","table"],
core: {
data: data
},
table: {
columns: [
{width: '35%', header: "Nodes",title:"_DATA_"},
{width: '45%', cellClass: "col1", value: "price", header: "<i>Price</i>", title:"price", valueClass:"spanclass"},
{width: '20%', cellClass: "col2", value: "size", header: "Qty", title:"size",valueClass:"spanclass"}
],
resizable:true,
contextmenu:true
}
}
];
for (i=0; i<trees.length; i++) {
expected = trees[i].table.width+': '+[trees[i].table.columns[0].width,trees[i].table.columns[1].width,trees[i].table.columns[2].width].join(' ');
$("div#alltrees").append('<div class="treesection"><h4>'+trees[i].htmlheader+'</h4><p>Expected '+expected+'</p><p class="actuals"></p><div id="jstree'+i+'"></div></div><hr/>');
$("div#jstree"+i).on("loaded_table.jstree",function(){
var wrapper = $(this).closest("div.jstree-table-wrapper"),
midw = wrapper.children("div.jstree-table-midwrapper"),
section = wrapper.closest("div.treesection"),
actuals = "Actuals "+wrapper.outerWidth()+": "+[midw.find("div.jstree-table-column:eq(0)").outerWidth(),midw.find("div.jstree-table-column:eq(1)").outerWidth(),midw.find("div.jstree-table-column:eq(2)").outerWidth()].join(' ');
section.find(".actuals").text(actuals);
});
$("div#jstree"+i).jstree(trees[i]);
}
});
</script>
</head>
<body>
<h2>Tree table Widths Test</h2>
<div id="alltrees">
</div>
</body>
</html>