|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
CODETHATTABLE USER MANUAL |
Configure Table Look
Here we describe GridDef properties that specify table look:
CSS styles
marked rows
table images
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 visualization
rowStyle :
{
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 Images
You can see an example and complete code here - CSS, Marked Rows and Table Images [popup]
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.