![]() ![]() |
|||||||
|
|||||||
![]() |
|||||||
|
|||||||
Configure Table LookHere we describe GridDef properties that specify table look:
Also we show column structure. var gridDef = { datatype : INT, // 0 - array (default), 1 - csv string, // (in develop - 2 -cvs file, 3 - xml file) data : ARRAY == [][] || STRING // (*) data for columns ... 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. Column definitions array structure: colDef : ARRAY == [ { title : STRING, // (*) column title titleClass : "", // (*) type : STRING, // (*) data type 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 } ] CSS classes for rows visualizationrowStyle : { markClass : "", // (*) marked string darkClass : "", // (*) dark string lightClass : "", // (*) light string hoverClass : "" // (*) active string } Here is a structure to describe images for Table:{ src : <file name>, width : <image width, px>, height : <image height, px> } To set table images you can use a structure like at the example below: imgSortAsc : // sort A-Z { src : "img/sortasc.gif", width : 10, height : 10 }, imgSortDesc : // sort Z-A { src : "img/sortdesc.gif", width : 10, height : 10 }, imgSortAscActive : // sort A-Z active { src : "img/sortasca.gif", width : 10, height : 10 }, imgSortDescActive : // sort Z-A active { src : "img/sortdesca.gif", width : 10, height : 10 }, imgMultiSortAscActive : // multi-sort A-Z active { src : "img/sortascma.gif", width : 10, height : 10 }, imgMultiSortDescActive : // multi-sort Z-A active { src : "img/sortdescma.gif", width : 10, height : 10 }, imgFirstPage : // go to the first page { src : "img/firstpage.gif", width : 10, height : 10 }, imgLastPage : // go to the last page { src : "img/lastpage.gif", width : 10, height : 10 }, imgPrevPage : // go to the previous page { src : "img/prevpage.gif", width : 10, height : 10 }, imgNextPage : // go to the next page { src : "img/nextpage.gif", width : 10, height : 10 } }; Example - CSS, Marked Rows and Table ImagesYou can see an example and complete code here - CSS, Marked Rows and Table Images [popup] |
|||||||
© CodeThat.com, 2003-2005 |