jstreegrid
Version:
grid plugin for jstree
276 lines (266 loc) • 9.39 kB
HTML
<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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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","grid"],
core: {
data: data
},
grid: {
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].grid.width+': '+[trees[i].grid.columns[0].width,trees[i].grid.columns[1].width,trees[i].grid.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_grid.jstree",function(){
var wrapper = $(this).closest("div.jstree-grid-wrapper"),
midw = wrapper.children("div.jstree-grid-midwrapper"),
section = wrapper.closest("div.treesection"),
actuals = "Actuals "+wrapper.outerWidth()+": "+[midw.find("div.jstree-grid-column:eq(0)").outerWidth(),midw.find("div.jstree-grid-column:eq(1)").outerWidth(),midw.find("div.jstree-grid-column:eq(2)").outerWidth()].join(' ');
section.find(".actuals").text(actuals);
});
$("div#jstree"+i).jstree(trees[i]);
}
});
</script>
<h2>Tree Grid Widths Test</h2>
<div id="alltrees">
</div>