CodeThatTable - Decoration Properties Example
//-----------------------------------------------------------------------------------
//GLOBAL VARS
//-----------------------------------------------------------------------------------
var DATE_FORMAT = "dd.mm.yyyy", CURRENCY_FORMAT = " $";
var EMPTY_ROW = "no filter";
//-----------------------------------------------------------------------------------
//TABLE DEFINITION
//-----------------------------------------------------------------------------------
var gridDef = {
amountPerPage : 30,
useMultiSort : true,
datatype : 0,
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 $"],
["4", "Gelinas Patricia", "18.07.2003", "pattigelinas@hotmail.com", "364 $"],
["5", "Cooke Dee", "02.05.2002", "findDeeCooke@aol.com", "74 $"],
["6", "Greiner Andrew", "08.01.2003", "andy_greiner@hotmail.com", " $"],
["7", "Maillet Chad", "01.01.2002", "ChadRM@rccw.com", "265 $"],
["8", "Batson Alecia", "01.01.2002", "acbatson@yahoo.com", " $"],
["9", "Gato Timothy", "01.01.2002", "tgato2@maine.rr.com", "60 $"],
["10", "Wheeler Skip", "01.01.2002", "skipw47@aol.com", "59 $"],
["11", "Davis Mackenzie", "01.01.2002", "mackenziecd@rccw.com", "527 $"],
["12", "Hatch Jennie", "01.01.2002", "JHatchling@aol.com", "529 $"],
["13", "picano anthony", "06.01.2003", "t_Picano@yahoo.com", " $"],
["14", "Bernard Ashley", "11.10.2003", "Twiceblessedmum@lycos.com", "380 $"],
["15", "Masabny Rob", "01.01.2002", "masabny@yahoo.com", "38 $"],
["16", "Philbrick John", "01.01.2002", "jphilbri@maine.rr.com", "452 $"],
],
colDef : [
{
title : "ID",
titleClass : "", //default for th,
cellClass : "",
type : "Number",
width : 75, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : false,
useAutoFilter : false
},
{
title : "Name",
titleClass : "",
cellClass : "",
type : "String",
width : 150, //auto
alignment : "",
compareFunction : compare,
isVisible : true,
useAutoIndex : false,
useAutoFilter : false
},
{
title : "Reg. date",
titleClass : "", //default for th
cellClass : "",
type : "Date",
width : 120, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "E-mail",
titleClass : "", //default for th
cellClass : "",
type : "Email",
width : 200,
alignment : "right",
compareFunction : compare,
isVisible : true,
useAutoIndex : false,
useAutoFilter : false
},
{
title : "Account",
titleClass : "", //default for th
cellClass : {
color : "red", textalign : "right"
},
type : "Currency",
width : 100, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
} ],
keyCol : "ID",
//rowHandler : rowHandler,
rowStyle : {
markClass : {
backgroundcolor : "#ccffff",
fontsize : 11,
fontfamily : "comic sans ms, arial",
fontweight : "bold", color : "darkgreen"
},
darkClass : "dark",
lightClass : "light",
hoverClass : {
backgroundcolor : "#ffffcc",
fontsize : 11,
fontfamily : "comic sans ms, arial",
fontweight : "bold", color : "darkgreen"
}
},
tableStyle : {
tableClass : {
backgroundcolor : "#ececec"
},
thClass : "th", //cells with controls && filters &| titles
border : 0,
cellpadding : 2,
cellspacing : 1
},
resetSortControl : {
img : {
src : "img/resetsort.gif", width : 16, height : 16, alt : "Reset sort"
},
text : ""
},
resetSearchControl : {
img : {
src : "img/resetsearch.gif", width : 16, height : 16, alt : "Reset search"
},
text : ""
},
resetMarkControl : {
img : {
src : "img/resetmark.gif", width : 16, height : 16, alt : "Reset select"
},
text : ""
},
amountControl : {
img : { },
text : "Amount: "
},
searchControl : {
img : {
src : "img/search.gif", width : 16, height : 16, alt : "Search"
},
text : "Search: "
},
imgSortAsc : {
src : "img/sortasc.gif", width : 10, height : 10
},
imgSortDesc : {
src : "img/sortdesc.gif", width : 10, height : 10
},
imgSortAscActive : {
src : "img/sortasca.gif", width : 10, height : 10
},
imgSortDescActive : {
src : "img/sortdesca.gif", width : 10, height : 10
},
imgMultiSortAscActive : {
src : "img/sortascma.gif", width : 10, height : 10
},
imgMultiSortDescActive : {
src : "img/sortdescma.gif", width : 10, height : 10
},
imgFirstPage : {
src : "img/firstpage.gif", width : 10, height : 10
},
imgLastPage : {
src : "img/lastpage.gif", width : 10, height : 10
},
imgPrevPage : {
src : "img/prevpage.gif", width : 10, height : 10
},
imgNextPage : {
src : "img/nextpage.gif", width : 10, height : 10
}
};
|