| ||||||||||
|
Here we describe GridDef properties that specify table look:
There is a column structure:
colDef : ARRAY == [
{
title: STRING, // (*) column title
titleClass: "", // (*)
type: UserType, // (*) String || Number || Currency
// || Date || Image || HTML || Email || URL
width: INT, // (*) column width
alignment: STRING, // (*) column alignment
compareFunction: FUNCTION, // (*) compare function
isVisible: BOOLEAN, // (*) whether column is visible
useAutoIndex: BOOLEAN, // (*) auto sort
useAutoFilter: BOOLEAN // (*) auto filter
},
...
]
titleClass - CSS class for column header. Default value = "" (default <TH> tag). Possible values for type - String || Number || Currency || Date || Image || HTML || Email || URL Default value for width = 0 (auto width for columns) Possible values for alignment - left || center || right Possible values for compareFunction - compare || compareImage || userFunc () => {1 || 0 || -1} For example:
colDef :
[
{
title: "ID",
titleClass: "", //default for th
type: "Number",
width: 75, //auto
alignment: "center",
compareFunction: compare,
isVisible: true,
useAutoIndex: false,
useAutoFilter: false
},
{
title: "Name",
titleClass: "",
type: "String",
width: 150, //auto
alignment: "",
compareFunction: compare,
isVisible: true,
useAutoIndex: false,
useAutoFilter: false
},
{
title: "Reg. date",
titleClass: "", //default for th
type: "Date",
width: 120, //auto
alignment: "center",
compareFunction: compare,
isVisible: true,
useAutoIndex: true,
useAutoFilter: true
}
]
At the data array you put all the data you'd like to show at the table. For example:
data : [
["1","Stiles James","01.01.2002","jstiles@necasting.com","270 $"],
["2","Alexander Jacklynn","12.05.2003","speedracer1979@iwon.com"," $"],
["3","Martin Barney","01.01.2002","bmartin1@maine.rr.com","92 $"]
]
Full GridDef structure description you can find here. To specify grid look in whole use the following structure:
tableStyle : {
tableClass : STRING | {styleparams}, // name of css style or style parameters for <TABLE> tag
thClass : STRING | {styleparams}, // name of css style or style parameters <TH> tag
tdClass : STRING | {styleparams}, // name of css style or style parameters <TD> tag
bgcolor : "RGB | COLORNAME", // (*) background color
x : INT, // (*) left X coordinate
y : INT, // (*) top Y coordinate
width: INT, // (*) table width
height: INT, // (*) table height
position: 0|1 //0 - relative, 1 - absolute
}
To specify rows look use the following structure:
rowStyle :
{
defaultClass: STRING | {styleparams}, // normal row style
markClass: STRING | {styleparams}, // selected row style
resizeClass: STRING | {styleparams}, // resize element style
dragClass: STRING | {styleparams}, // drag element style
width : INT, // (*) default width
height: INT // (*) default height
}
To specify columns look use the following structure:
colStyle :
{
defaultClass : STRING | {styleparams}, // normal state style
markClass: STRING | {styleparams}, // selected state style
resizeClass: STRING | {styleparams}, // resize element style
dragClass: STRING | {styleparams}, // drag element style
width : INT, // (*) default width
height: INT // (*) default height
}
To specify cells look use the following structure:
cellStyle :
{
defaultClass : STRING | {styleparams}, // normal state style
markClass: STRING | {styleparams}, // selected state style
currClass: STRING | {styleparams}, // current state style
}
To describe {styleparams} use the following:
{
// border params
borderwidth : INT, // make sense only if tableStyle.border > 0
bordercolor : "#RGB|COLORNAME",
borderstyle : "none" | "dotted" | "dashed" | "solid"
| "double" | "groove" | "ridge" | "inset" | "outset",
// NOT FOR cellClass
backgroundcolor: "#RGB | COLORNAME",
backgroundimage: "URL(SRC) ",
backgroundrepeat : "repeat" | "repeat-x" | "repeat-y" | "no-repeat",
//color of text (this setting is not useful for set color of a parameters)
color: "#RGB | COLORNAME",
// font params
fontfamily:"FONTNAME",
fontstyle: "normal" | "italic" | "oblique",
fontweight: "normal" | "bold" | "bolder" | "lighter"
| "100" | "200" | "300" | "400" | "500"
| "600" | "700" | "800" | "900",
fontsize: "NUMBER + px | pt",
// text params
textalign: "left" | "right" | "center" | "justify",
textdecoration: "none" | "underline" | "overline" | "line-through",
verticalalign: "bottom" | "top" | "middle"
}
To specify toolbar look use the following structure:
// if you don't specify this parameter you'll be able to use search feature only
// if you'd like to hide some button just remove this button description
// from the toolbar description
toolBar:
{
height: INT, // (*) toolbar height
bgcolor : "RGB | COLORNAME", // (*) toolbar background color
defaultClass : : STRING | {styleparams}, // default common style
// (*) toolbar buttons
buttons:[
{
name : "addrowto" | "addrowafter" | "delrow" |
"addcolto" | "addcolafter" | "delcol" |
"copy" | "paste" | "sortasc" | "sortdesc" |
"multisortasc" | "multisortdesc" | "formatbold" |
"formatitalic" | "formatunderline" | "alignleft" |
"aligncenter" | "alignright" // (*) button names
img_on : {src: "img/addrowto.gif", width: "16", height:"16"}, // (*) active button image
img_off : {src: "img/addrowto_off.gif", width: "16", height:"16"}, // inactive button image
text : "Add row before current one", // (*) hint
showMessage : true // (*) show or not information at the status bar when the action in progress
},
{}, // empty structure
],
// search control
searchControl:{
img_on:{src:"img/search.gif", width:16, height:16}, // search image
text_on:"Search", // (*) hint
img_off:{src:"img/resetsearch.gif", width:16, height:16}, // reset search image
text_off:"Show all"// (*) hint
}
}
To specify toolbar look use the following structure:
statusBar:
{
height: INT, // (*) statusbar height
bgcolor : "RGB | COLORNAME", // (*) statusbar background color
defaultClass : STRING | {styleparams}, // common style
messageClass : STRING | {styleparams}, // service message style
fieldText : "Field", // (*) cell title
valueText : "Value" // (*) value title
}
You can see an example and complete code here - Grid Look [popup] Read more about CodeThatGrid >>
| ||||||||||