CodeThatGrid - Grid Generation from the XML file
//-----------------------------------------
//GLOBAL VARS
//-----------------------------------------
var DATE_FORMAT = "dd.mm.yyyy";
var EMPTY_ROW = "";
var DEFAULT_COLDEF = {
title : "",
titleClass : "",
type : "String", //the default type
width : 0, //auto
alignment : "", //auto
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : false
};
//-----------------------------------------
//GRID DEFINITION
//-----------------------------------------
var gridDef = {
useExportBar : false,
useMultiSort : true,
useColTitle : true,
datatype : 2,
data : "xml.xml",
colDef : [
{
title : "ID",
titleClass : "", //default for th
type : "Number",
width : 0, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "Name",
titleClass : "",
type : "String",
width : 200, //auto
alignment : "",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "Reg. date",
titleClass : "", //default for th
type : "Date",
width : 100, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "Account",
titleClass : "", //default for th
type : "Currency",
width : 0, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : false
} ],
tableStyle : {
tableClass : {
borderwidth : "2", borderstyle : "solid",
bordercolor : "#bbbbbb",
backgroundcolor : "#ffffff"
},
thClass : {
fontfamily : "Verdana", fontsize : "12px",
color : "#000000", borderwidth : "1",
borderstyle : "solid", bordercolor : "#cfcfcf"
},
tdClass : {
fontfamily : "Verdana", fontsize : "12px",
color : "#000000"
},
bgcolor : "#bbbbbb",
x : 10,
y : 10,
width : 660,
height : 480
},
rowStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#cccccc",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
markClass : {
backgroundcolor : "#ccccff",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
resizeClass : {
cursor : "row-resize", borderwidth : "0"
},
dragClass : {
cursor : "move", borderwidth : "0"
},
width : 20,
height : 20
},
colStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#cccccc",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
markClass : {
backgroundcolor : "#ccccff",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
resizeClass : {
cursor : "col-resize",
borderwidth : "0"
},
dragClass : {
cursor : "move",
borderwidth : "0"
},
width : 100,
height : 20
},
cellStyle : {
defaultClass : {
padding : "1", borderwidth : "1",
borderstyle : "solid",
bordercolor : "#cfcfcf",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#ffffff",
color : "#000000"
},
markClass : {
padding : "1", borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#cfcfcf",
color : "#000000"
},
currClass : {
padding : "1", borderwidth : "2",
borderstyle : "solid",
bordercolor : "#000000",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#ffffff",
color : "#000000"
}
},
toolBar : {
height : 29,
bgcolor : "#bbbbbb",
defaultClass : {
bordercolor : "#bbbbbb", color : "#000000"
},
buttons : [
{
name : "addrowto",
img_on : {
src : "img/addrowto.gif",
width : "16", height : "16"
},
img_off : {
src : "img/addrowto_off.gif",
width : "16", height : "16"
},
text : "Add row before current one",
showMessage : true
},
{
name : "addrowafter",
img_on : {
src : "img/addrowafter.gif",
width : "16", height : "16"
},
img_off : {
src : "img/addrowafter_off.gif",
width : "16", height : "16"
},
text : "Add row after current one",
showMessage : true
},
{
name : "delrow",
img_on : {
src : "img/delrow.gif",
width : "16", height : "16"
},
img_off : {
src : "img/delrow_off.gif",
width : "16", height : "16"
},
text : "Delete row",
showMessage : true
},
{ }, //separator
{
name : "addcolto",
img_on : {
src : "img/addcolto.gif",
width : "16", height : "16"
},
img_off : {
src : "img/addcolto_off.gif",
width : "16", height : "16"
},
text : "Add column before current one",
showMessage : true
},
{
name : "addcolafter",
img_on : {
src : "img/addcolafter.gif",
width : "16", height : "16"
},
img_off : {
src : "img/addcolafter_off.gif",
width : "16", height : "16"
},
text : "Add column after current one",
showMessage : true
},
{
name : "delcol",
img_on : {
src : "img/delcol.gif",
width : "16", height : "16"
},
img_off : {
src : "img/delcol_off.gif",
width : "16", height : "16"
},
text : "Delete column",
showMessage : true
},
{ }, //separator
{
name : "copy",
img_on : {
src : "img/copy.gif",
width : "16", height : "16"
},
img_off : {
src : "img/copy_off.gif",
width : "16", height : "16"
},
text : "Copy",
showMessage : false
},
{
name : "paste",
img_on : {
src : "img/paste.gif",
width : "16", height : "16"
},
img_off : {
src : "img/paste_off.gif",
width : "16", height : "16"
},
text : "Pasting data from current cell",
showMessage : true
},
{ },
{
name : "sortasc",
img_on : {
src : "img/sortasc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortasc_off.gif", width : "16", height : "16"
},
text : "Sort data in current column in ascending order",
showMessage : true
},
{
name : "sortdesc",
img_on : {
src : "img/sortdesc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortdesc_off.gif", width : "16", height : "16"
},
text : "Sort data in current column in descending order",
showMessage : true
},
{
name : "multisortasc",
img_on : {
src : "img/multisortasc.gif", width : "16", height : "16"
},
img_off : {
src : "img/multisortasc_off.gif", width : "16", height : "16"
},
text : "Keep current order and sort data in current column in ascending order",
showMessage : true
},
{
name : "multisortdesc",
img_on : {
src : "img/multisortdesc.gif", width : "16", height : "16"
},
img_off : {
src : "img/multisortdesc_off.gif", width : "16", height : "16"
},
text : "Keep current order and sort data in current column in descending order",
showMessage : true
},
{ },
{
name : "formatbold",
img_on : {
src : "img/formatbold.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatbold_off.gif", width : "16", height : "16"
},
text : "Format bold",
showMessage : false
},
{
name : "formatitalic",
img_on : {
src : "img/formatitalic.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatitalic_off.gif", width : "16", height : "16"
},
text : "Format italic",
showMessage : false
},
{
name : "formatunderline",
img_on : {
src : "img/formatunderline.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatunderline_off.gif", width : "16", height : "16"
},
text : "Format underline",
showMessage : false
},
{ },
{
name : "alignleft",
img_on : {
src : "img/alignleft.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignleft_off.gif", width : "16", height : "16"
},
text : "Align left",
showMessage : false
},
{
name : "aligncenter",
img_on : {
src : "img/aligncenter.gif", width : "16", height : "16"
},
img_off : {
src : "img/aligncenter_off.gif", width : "16", height : "16"
},
text : "Align center",
showMessage : false
},
{
name : "alignright",
img_on : {
src : "img/alignright.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignright_off.gif", width : "16", height : "16"
},
text : "Align right",
showMessage : false
} ],
searchControl : {
//img_on:{src:"img/search.gif", width:16, height:16},
text_on : "Search",
//img_off:{src:"img/resetsearch.gif", width:16, height:16},
text_off : "Show all"
}
},
statusBar : {
height : 15,
bgcolor : "#bbbbbb",
defaultClass : {
color : "#000000", fontfamily : "Verdana", fontsize : "11px"
},
messageClass : {
color : "#0000ff", fontfamily : "Verdana", fontsize : "11px"
},
fieldText : "Field",
valueText : "Value"
}
};
|