|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
|
|
|
CODETHATGRID USER GUIDE |
The following "9 steps" instruction will guide you step by step through the CodeThatGrid configuration process.
Download package with CodeThatGrid script and unarchive it.
For free version (STD) download use this link.
If you'd like to buy full version (PRO) use this link.
Please bear in mind that CodeThat scripts come in two editions STANDARD and PRO. Editions differ by the features set and license type.
Standard version is given for free and comes with the inscription representing our company's name. Upon registration you will get rid of that text.
Read Standard vs PRO to know the differences between CodeThatGrid Standard and PRO.
Create the basic HTML file.
Your file may look as following:
<HTML> <HEAD> <link href="common.css" rel="stylesheet" type="text/css"> <script language="javascript1.2" src="codethatsdk.js"></script> <script language="javascript1.2" src="codethatgridpro.js"></script> <script language="javascript1.2" src="codethattype.js"></script> </HEAD> <BODY> <p> HELLO WORD! </BODY> </HTML> |
First of all we should initialize CodeThatGrid:
<script language="javascript1.2">
<!--
var CodeThatGrid = new CCodeThatGrid("CodeThatGrid", NUM_ROWS, NUM_COLS);
CodeThatGrid.init(gridDef); // data initialization from gridDef structure
CodeThatGrid.doAction(); // work with table
//-->
</script>
|
Now lets create your first CodeThatGrid.
For this purpose you can both create separate config *.js file or write the config construction right to your *.html file. Here we will view second variant.
To describe new grid create an object with following structure:
var gridDef = {
useRCID : Boolean, // whether we use row/column header, default:true
useExportBar : Boolean, // whether show layer with export form or not, default:false
useMultiSort : Boolean, // whether we use multisort, default:true
useColTitle : Boolean, // whether we show column titles, default:true,
useProgress : Boolean, // whether we show information about grid actions, default:true
amountPerPage : int, // count records per 1 page, default:20
datatype : 0|1|2|3|4, // 0 - array (default), 1 - csv String, 2 - xml file,
// 3 - csv file, 4 - xml String
data : Array | String, // data
colDef : Array, //[{...}, ...] column definitions array,
// if empty will use DEFAULT_COLDEF
tableStyle : {
...
}, // style parameters for table in whole
rowStyle : {
...
}, // row style parameters
colStyle : {
...
}, // column stle parameters
cellStyle : {
...
}, // cell style parameters
toolBar : {
...
}, // toolbar parameters
// if you'd like to hide some button just remove this button description
// from the toolbar description
statusBar : {
...
}, // statusbar parameters
pageTurnBar : {
...
}
// pageturnbar parameters
};
|
Hint - if parameters description isn't clearly understanding please have a look to CodeThatGrid User Manual
Data for the Grid.
You can describe data for the grid by using one of the following ways:
String by string definition at the table definition
Definition from the csv string or csv file
Definition from the XML string or XML file
Here we show the first way:
datatype : 0, data : [["1", "Stiles James", "01.01.2002", "2"], ["2", "Alexander Jacklynn", "12.05.2003", "2"], ["3", "Martin Barney", "01.01.2002", "2"], ["4", "Gelinas Patricia", "18.07.2003", "2"], ["5", "Cooke Dee", "02.05.2002", "2"] ] |
Columns description.
For every column at your grid you need to create description where column title, css class, column type, width, alignment and the other staff are specified.
Also you should describe default properties for column in DEFAULT_COLDEF Object.
To learn more about column description read Configure grid look page.
var DEFAULT_COLDEF = {
title : "",
titleClass : "",
type : "String", //the default type
width : 100,
alignment : "",
compareFunction : compare,
userFunction : null,
isVisible : true,
isReadOnly : false,
useAutoIndex : false,
useAutoFilter : false
};
...
colDef :
[
{
title : "ID",
titleClass : "",
type : "Number",
width : 75,
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : false,
useAutoFilter : false
},
{
title : "Name",
titleClass : "",
type : "String",
width : 150,
alignment : "",
compareFunction : compare,
isVisible : true,
useAutoIndex : false,
useAutoFilter : false
},
...
]
|
Then you specify whole table style
Specify style for its colunm, rows and cells, toolbar, statusbar and pageturnbar style, and specify the buttons set:
tableStyle : {
tableClass : {
borderwidth : 1, bordercolor : "#bbbbbb", borderstyle : "solid"
},
bgcolor : "#ffffff",
x : 10,
y : 10,
width : 660,
height : 480
},
rowStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#cccccc",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
markClass : {
backgroundcolor : "#ccccff",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
dragClass : {
cursor : "move", borderwidth : "0"
},
width : 20,
height : 20
},
colStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#cccccc",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
markClass : {
backgroundcolor : "#ccccff",
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc"
},
dragClass : {
cursor : "move",
borderwidth : "0"
},
width : 100,
height : 20
},
cellStyle : {
defaultClass : {
borderwidth : "1",
borderstyle : "solid",
bordercolor : "#cfcfcf",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#ffffff",
color : "#000000"
},
markClass : {
borderwidth : "1",
borderstyle : "outset",
bordercolor : "#cccccc",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#cfcfcf",
color : "#000000"
},
currClass : {
borderwidth : "2",
borderstyle : "solid",
bordercolor : "#000000",
fontfamily : "Arial",
fontsize : "12px",
backgroundcolor : "#ffffff",
color : "#000000"
}
},
toolBar : {
height : 29,
bgcolor : "#D4D0C8",
defaultClass : {
borderwidth : 0
},
buttons : [
{
name : "addrowto",
img_on : {
src : "img/addrowto.gif", width : "16", height : "16"
},
img_off : {
src : "img/addrowto_off.gif", width : "16", height : "16"
},
text : "Add row before current one"
},
{
name : "addrowafter",
img_on : {
src : "img/addrowafter.gif", width : "16", height : "16"
},
img_off : {
src : "img/addrowafter_off.gif",
width : "16", height : "16"
},
text : "Add row after current one"
},
{
name : "delrow",
img_on : {
src : "img/delrow.gif", width : "16", height : "16"
},
img_off : {
src : "img/delrow_off.gif", width : "16", height : "16"
},
text : "Delete row"
},
{ }, //insert separator
{
name : "addcolto",
img_on : {
src : "img/addcolto.gif", width : "16", height : "16"
},
img_off : {
src : "img/addcolto_off.gif", width : "16", height : "16"
},
text : "Add column before current one"
},
{
name : "addcolafter",
img_on : {
src : "img/addcolafter.gif", width : "16", height : "16"
},
img_off : {
src : "img/addcolafter_off.gif", width : "16", height : "16"
},
text : "Add column after current one"
},
{
name : "delcol",
img_on : {
src : "img/delcol.gif", width : "16", height : "16"
},
img_off : {
src : "img/delcol_off.gif", width : "16", height : "16"
},
text : "Delete column"
},
{ },
{
name : "copy",
img_on : {
src : "img/copy.gif", width : "16", height : "16"
},
img_off : {
src : "img/copy_off.gif", width : "16", height : "16"
},
text : "Copy"
},
{
name : "paste",
img_on : {
src : "img/paste.gif", width : "16", height : "16"
},
img_off : {
src : "img/paste_off.gif", width : "16", height : "16"
},
text : "Pasting data from current cell"
},
{ },
{
name : "sortasc",
img_on : {
src : "img/sortasc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortasc_off.gif", width : "16", height : "16"
},
text : "Sort data in current column in ascending order"
},
{
name : "sortdesc",
img_on : {
src : "img/sortdesc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortdesc_off.gif", width : "16", height : "16"
},
text : "Sort data in current column in descending order"
},
{
name : "multisortasc",
img_on : {
src : "img/multisortasc.gif", width : "16", height : "16"
},
img_off : {
src : "img/multisortasc_off.gif", width : "16", height : "16"
},
text : "Keep current order and sort data in current column in ascending order"
},
{
name : "multisortdesc",
img_on : {
src : "img/multisortdesc.gif", width : "16", height : "16"
},
img_off : {
src : "img/multisortdesc_off.gif", width : "16", height : "16"
},
text : "Keep current order and sort data in current column in descending order"
},
{
name : "resetsort",
img_on : {
src : "img/resetsort.gif", width : "16", height : "16"
},
img_off : {
src : "img/resetsort_off.gif", width : "16", height : "16"
},
text : "Reset sort"
},
{ },
{
name : "formatbold",
img_on : {
src : "img/formatbold.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatbold_off.gif", width : "16", height : "16"
},
text : "Format bold"
},
{
name : "formatitalic",
img_on : {
src : "img/formatitalic.gif",
width : "16", height : "16"
},
img_off : {
src : "img/formatitalic_off.gif", width : "16", height : "16"
},
text : "Format italic"
},
{
name : "formatunderline",
img_on : {
src : "img/formatunderline.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatunderline_off.gif", width : "16", height : "16"
},
text : "Format underline"
},
{ },
{
name : "alignleft",
img_on : {
src : "img/alignleft.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignleft_off.gif", width : "16", height : "16"
},
text : "Align left"
},
{
name : "aligncenter",
img_on : {
src : "img/aligncenter.gif", width : "16", height : "16"
},
img_off : {
src : "img/aligncenter_off.gif", width : "16", height : "16"
},
text : "Align center"
},
{
name : "alignright",
img_on : {
src : "img/alignright.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignright_off.gif", width : "16", height : "16"
},
text : "Align right"
},
{ },
{
name : "setsearch",
img_on : {
src : "img/setsearch.gif", width : "16", height : "16"
},
text : "Search in grid"
},
{
name : "resetsearch",
img_on : {
src : "img/resetsearch.gif", width : "16", height : "16"
},
text : "Reset search. Show all records."
},
{
name : "setamount",
img_on : {
src : "img/setamount.gif", width : "16", height : "16"
},
text : "Set count of records per page"
} ]
},
statusBar : {
height : 15,
bgcolor : "#D4D0C8",
defaultClass : {
color : "#000000", fontfamily : "Verdana", fontsize : "11px"
},
messageClass : {
color : "#0000ff", fontfamily : "Verdana", fontsize : "11px"
},
fieldText : "Field",
valueText : "Value"
},
pageTurnBar : {
defaultClass : {
backgroundcolor : "#ffffff", fontsize : "11px", fontfamily : "Verdana,Arial"
},
activeClass : {
backgroundcolor : "#D4D0C8", fontsize : "11px", fontfamily : "Verdana,Arial"
},
img_on : {
src : "img/t_on.gif"
},
img_off : {
src : "img/t_off.gif"
},
text : "Page", width : 65, height : 14
}
|
So... A complete code for this example you can see here:
//GLOBAL VARS
var DATE_FORMAT = "dd.mm.yyyy", CURRENCY_FORMAT = "$", EMPTY_ROW = "",
DEFAULT_COLDEF = {
title : "",
titleClass : "",
type : "String", //the default type
width : 80,
alignment : "",
compareFunction : compare,
isVisible : 1,
isReadOnly : 0,
useAutoIndex : 0,
useAutoFilter : 0
};
//-----------------------------------------------------------------------------------
//GRID DEFINITION
//-----------------------------------------------------------------------------------
var gridDef = {
useExportBar : true,
useMultiSort : true,
useColTitle : true,
datatype : 0,
data : [ ["1", "Stiles James", "01.01.2002", "7"],
["2", "Alexander Jacklynn", "12.05.2003", "2"],
["3", "Martin Barney", "01.01.2002", "2"],
["4", "Gelinas Patricia", "18.07.2003", "2"],
["5", "Cooke Dee", "02.05.2002", "2"]],
colDef : [
{
title : "ID",
titleClass : "", //default for th
type : "Number",
width : 0, //auto
alignment : "center",
compareFunction : compare,
isVisible : false,
useAutoIndex : true,
useAutoFilter : false
},
{
title : "Name",
titleClass : "",
type : "String",
width : 200, //auto
alignment : "",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "Reg. date",
titleClass : "", //default for th
type : "Date",
width : 100, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
},
{
title : "Kind",
titleClass : "", //default for th
type : "Number",
width : 50, //auto
alignment : "center",
compareFunction : compare,
isVisible : true,
useAutoIndex : true,
useAutoFilter : true
} ],
tableStyle : {
tableClass : {
borderwidth : 1, bordercolor : "#bbbbbb", borderstyle : "solid"
},
bgcolor : "#ffffff",
x : 10,
y : 10,
width : 520,
height : 450
},
rowStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "11px",
backgroundcolor : "#D4D0C8", borderwidth : "1",
borderstyle : "outset", bordercolor : "#cccccc"
},
markClass : {
fontfamily : "Verdana", fontsize : "11px",
backgroundcolor : "#ccccff", borderwidth : "1",
borderstyle : "outset", bordercolor : "#cccccc"
},
dragClass : {
cursor : "move", borderwidth : "0"
},
width : 20,
height : 21
},
colStyle : {
defaultClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#D4D0C8", borderwidth : "1",
borderstyle : "outset", bordercolor : "#cccccc"
},
markClass : {
fontfamily : "Verdana", fontsize : "12px",
backgroundcolor : "#ccccff", borderwidth : "1",
borderstyle : "outset", bordercolor : "#cccccc"
},
dragClass : {
cursor : "move", borderwidth : "0"
},
width : 100,
height : 21
},
cellStyle : {
defaultClass : {
borderwidth : "1", borderstyle : "solid",
bordercolor : "#cfcfcf", fontfamily : "Arial",
fontsize : "12px", backgroundcolor : "#ffffff",
color : "#000000"
},
markClass : {
borderwidth : "1", borderstyle : "outset",
bordercolor : "#D4D0C8", fontfamily : "Arial", fontsize : "12px",
backgroundcolor : "#cfcfcf", color : "#000000"
},
currClass : {
borderwidth : "2", borderstyle : "solid",
bordercolor : "#000000", fontfamily : "Arial", fontsize : "12px",
backgroundcolor : "#ffffff", color : "#000000"
}
},
toolBar : {
height : 29,
bgcolor : "#D4D0C8",
defaultClass : {
borderwidth : 0
},
buttons : [
{
name : "addrowto",
img_on : {
src : "img/addrowto.gif", width : "16", height : "16"
},
img_off : {
src : "img/addrowto_off.gif", width : "16", height : "16"
},
text : "Add row before current one"
},
{
name : "addrowafter",
img_on : {
src : "img/addrowafter.gif", width : "16", height : "16"
},
img_off : {
src : "img/addrowafter_off.gif",
width : "16", height : "16"
},
text : "Add row after current one"
},
{
name : "delrow",
img_on : {
src : "img/delrow.gif", width : "16", height : "16"
},
img_off : {
src : "img/delrow_off.gif", width : "16", height : "16"
},
text : "Delete row"
},
{ }, //separator
{
name : "addcolto",
img_on : {
src : "img/addcolto.gif", width : "16", height : "16"
},
img_off : {
src : "img/addcolto_off.gif", width : "16", height : "16"
},
text : "Add column before current one"
},
{
name : "addcolafter",
img_on : {
src : "img/addcolafter.gif", width : "16", height : "16"
},
img_off : {
src : "img/addcolafter_off.gif",
width : "16", height : "16"
},
text : "Add column after current one"
},
{
name : "delcol",
img_on : {
src : "img/delcol.gif", width : "16", height : "16"
},
img_off : {
src : "img/delcol_off.gif", width : "16", height : "16"
},
text : "Delete column"
},
{ }, //separator
{
name : "copy",
img_on : {
src : "img/copy.gif", width : "16", height : "16"
},
img_off : {
src : "img/copy_off.gif", width : "16", height : "16"
},
text : "Copy"
},
{
name : "paste",
img_on : {
src : "img/paste.gif", width : "16", height : "16"
},
img_off : {
src : "img/paste_off.gif", width : "16", height : "16"
},
text : "Pasting data from current cell"
},
{ },
{
name : "sortasc",
img_on : {
src : "img/sortasc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortasc_off.gif", width : "16", height : "16"
},
text : "Sort data in current column in ascending order"
},
{
name : "sortdesc",
img_on : {
src : "img/sortdesc.gif", width : "16", height : "16"
},
img_off : {
src : "img/sortdesc_off.gif",
width : "16", height : "16"
},
text : "Sort data in current column in descending order"
},
{
name : "multisortasc",
img_on : {
src : "img/multisortasc.gif",
width : "16", height : "16"
},
img_off : {
src : "img/multisortasc_off.gif",
width : "16", height : "16"
},
text : "Keep current order and sort data in current " .
"column in ascending order"
},
{
name : "multisortdesc",
img_on : {
src : "img/multisortdesc.gif",
width : "16", height : "16"
},
img_off : {
src : "img/multisortdesc_off.gif",
width : "16", height : "16"
},
text : "Keep current order and sort data in " .
"current column in descending order"
},
{
name : "resetsort",
img_on : {
src : "img/resetsort.gif", width : "16", height : "16"
},
img_off : {
src : "img/resetsort_off.gif",
width : "16", height : "16"
},
text : "Reset sort"
},
{ },
{
name : "formatbold",
img_on : {
src : "img/formatbold.gif", width : "16", height : "16"
},
img_off : {
src : "img/formatbold_off.gif",
width : "16", height : "16"
},
text : "Format bold"
},
{
name : "formatitalic",
img_on : {
src : "img/formatitalic.gif",
width : "16", height : "16"
},
img_off : {
src : "img/formatitalic_off.gif",
width : "16", height : "16"
},
text : "Format italic"
},
{
name : "formatunderline",
img_on : {
src : "img/formatunderline.gif",
width : "16", height : "16"
},
img_off : {
src : "img/formatunderline_off.gif",
width : "16", height : "16"
},
text : "Format underline"
},
{ },
{
name : "alignleft",
img_on : {
src : "img/alignleft.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignleft_off.gif",
width : "16", height : "16"
},
text : "Align left"
},
{
name : "aligncenter",
img_on : {
src : "img/aligncenter.gif", width : "16", height : "16"
},
img_off : {
src : "img/aligncenter_off.gif",
width : "16", height : "16"
},
text : "Align center"
},
{
name : "alignright",
img_on : {
src : "img/alignright.gif", width : "16", height : "16"
},
img_off : {
src : "img/alignright_off.gif",
width : "16", height : "16"
},
text : "Align right"
},
{ },
{
name : "setsearch",
img_on : {
src : "img/setsearch.gif", width : "16", height : "16"
},
text : "Search in grid"
},
{
name : "resetsearch",
img_on : {
src : "img/resetsearch.gif", width : "16", height : "16"
},
text : "Reset search. Show all records."
},
{
name : "setamount",
img_on : {
src : "img/setamount.gif", width : "16", height : "16"
},
text : "Set count of records per page"
} ]
},
statusBar : {
height : 15,
bgcolor : "#D4D0C8",
defaultClass : {
color : "#000000", fontfamily : "Verdana", fontsize : "11px"
},
messageClass : {
color : "#0000ff", fontfamily : "Verdana", fontsize : "11px"
},
fieldText : "Field",
valueText : "Value"
},
pageTurnBar : {
defaultClass : {
backgroundcolor : "#ffffff", fontsize : "11px",
fontfamily : "Verdana,Arial"
},
activeClass : {
backgroundcolor : "#D4D0C8", fontsize : "11px",
fontfamily : "Verdana,Arial"
},
img_on : {
src : "img/t_on.gif"
},
img_off : {
src : "img/t_off.gif"
},
text : "Page", width : 65, height : 14
}
};
|
Hint - for using CodeThat Scripts you aren't limited only by html files. For example, you can build it in the *.php files. We've made it at this site :)
Congratulations! You have just created your first CodeThatGrid enhanced web page.
To make your life easier we do plan to supply you with on and off line grid builders in the nearest time.
|
[ Home ] [ Forum ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Sales & Prices ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2008
Design by XTLabs, Inc.