![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
Configure Grid LookHere we describe GridDef properties that specify table look:
There is a column definition object: colDef : [ { title : String, // column title titleClass : String, // column title class css type : String, // (*) column datatype: String | Number | Currency | Date | // Image | HTML | Email | URL | User Defined Type width : int | String, // column width alignment : String, // column alignment compareFunction : Function, // (*) compare function userFunction : Function, // user function isVisible : Boolean, // whether column is visible isReadOnly : Boolean, // whether column is read only useAutoIndex : Boolean, // auto index useAutoFilter : Boolean // auto filter }, ... ] titleClass - CSS class for column header. Default value = "". Possible values for type - String | Number | Currency | Date | Image | HTML | Email | URL | User defined type Possible values for alignment - left | center | right Possible values for compareFunction - compare | compareImage | userCompareFunction () => {1 || 0 || -1} For example: colDef : [ { title : "ID", titleClass : "", type : "Number", width : '10%', alignment : "center", compareFunction : compare, isVisible : true, isReadOnly : false, useAutoIndex : false, useAutoFilter : false }, { title : "Name", titleClass : "dtitle", type : "String", width : 150, alignment : "", compareFunction : compare, isVisible : true, isReadOnly : false, useAutoIndex : false, useAutoFilter : false }, { title : "Reg. date", titleClass : "ctitle", type : "Date", width : 120, alignment : "center", compareFunction : compare, isVisible : true, isReadOnly : true, useAutoIndex : true, useAutoFilter : true }, { title : "Icon", titleClass : "ctitle", type : "Image", width : '5%', alignment : "center", compareFunction : compareImage, isVisible : true, isReadOnly : true, useAutoIndex : false, useAutoFilter : false } ] 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 class or style parameters bgcolor : "#RGB | COLORNAME", // (*) background color x : int, // (*) left X coordinate y : int, // (*) top Y coordinate width : int, // (*) table width height : int, // (*) table height overflow : auto | visible | hidden // (*) overflow style parameter, // default : auto } To specify rows look use the following structure: rowStyle : { defaultClass : String | { styleparams }, // normal row style markClass : String | { styleparams }, // selected row 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 column style markClass : String | { styleparams }, // selected column 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 cell style markClass : String | { styleparams }, // selected cell style currClass : String | { styleparams }, // current cell 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", //background parameters 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 parameters 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'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 }, // style buttons : [ // toolbar buttons { name : String, // (*) Name img_on : { src : String, width : int, height : int }, // (*) active button image img_on : { src : String, width : int, height : int }, // inactive button image text : String // (*) Hint }, { }, // insert separator ... ] } Possible values for buttons name: "addrowto", "addrowafter", "delrow", "addcolto", "addcolafter", "delcol", "sortasc", "sortdesc", "multisortasc", "multisortdesc", "resetsort", "copy", "paste", "formatbold", "formatitalic", "formatunderline", "alignleft", "aligncenter", "alignright", "setsearch", "resetsearch", "setamount". To specify statusbar 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", // (*) field label valueText : "Value" // (*) value label } To specify pageturnbar look use the following structure: pageTurnBar : { defaultClass : String : { styleparams }, // (*) normal page style activeClass : String : { styleparams }, // (*) current page style img_on : { src : "img/t_on.gif" }, //current page bgimage img_off : { src : "img/t_off.gif" }, //normal page bgimage text : "Page", // (*) hint template width : int, // (*) width of one tab height : int //(*) height of one tab } Example - Grid LookYou can see an example and complete code here - Grid Look [popup] |
|||||||
© CodeThat.com, 2003-2005 |