![]() | ||||||||||
![]() | ||||||||||
| ||||||||||
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 >>
|