CodeThatGrid - Use form elements within grid, set default values and redefine methods in grid
<form name="myform" onSubmit="return false;">
<script language="javascript1.2">
<!--
//COMMON FUCNTIONS
//---------------------------------------------------
//set select control into cell with predefined value
//---------------------------------------------------
function setSelect(id, selectedValue) {
var s = "<select name=\"s" + id + "\">"
+ "<option value=\"0\" style=\"color:red\">Off</option>"
+ "<option value=\"1\" style=\"color:blue\">On</option>"
+ "</select>";
s = s.replace(new RegExp("value=\"" + selectedValue
+ "\"", "ig"), "value=\"" + selectedValue + "\" selected");
return s;
};
//------------------------------------------------------------------------------
//set select control into cell with setted checked attribute and value equals id
//------------------------------------------------------------------------------
function setCheckBox(id, isChecked) {
return "<input type=\"checkbox\" name=\"c" + id + "\" value=\"" + id + "\"" +
((isChecked)? " checked" : "") + ">";
};
//--------------------------------------------------------------------------------------
//For get right values from form element when data submitted you need your own function
//function to get info from grid and form elements in it in CSV format
//--------------------------------------------------------------------------------------
function getDataFromGrid(g) {
var i, j, data = "", f = document.forms["myform"], id, value;
for (i = 0; i < g.rowCount; i++) {
for (j = 0; j < g.colCount; j++) {
switch (g.cols[j].title) {
case "ID" :
id = g.cells[i][j].getData();
value = id;
break;
case "Status" :
if (Def(f.elements["s" + id])) value =
f.elements["s" + id][f.elements["s" + id].selectedIndex].value;
else value = "";
break;
case "Client" :
if (Def(f.elements["c" + id]) && f.elements["c" + id].checked) value = 1
else value = 0;
break;
default :
value = g.cells[i][j].getDataForEdit();
};
data += value + ";"
};
data += "\n";
};
return data;
};
//------------------------------------------------------------------------------
//OBJECT FUNCTIONS
//------------------------------------------------------------------------------
var Ap = Array.prototype;
Ap.max = function() {
var i, t = this, max;
if (!t.length) return max;
max = t[0];
for (i = 1; i < t.length; i++) if (max < t[i]) max = t[i];
return max;
};
//---------------------------------------------------
//redefine method addrow for add default values
//---------------------------------------------------
var CGp = CCodeThatGrid.prototype;
CGp.lastID = 0;
//function setLastID
CGp.setLastID = function() {
var i, a = [];
for (i = 0; i < this.rowCount; i++) a[a.length] = this.cells[i][0].data;
this.lastID = a.max() + 1; //NEW PROPERTY
};
CGp.addRow = function(idx, offset, p) {
var t = this, l = t.rowCount, i, cl, value;
if (Undef(p)) p = 1;
if (Undef(idx)) {
cl = t.curCell;
if (Undef(cl)) {
if (t.markType == 2) idx = t.markRange[0]
else idx = 0;
}
else idx = cl.row._id;
idx = t.rIdx.indexOf(idx);
if (offset > 0) idx++;
};
if (p) t.showProgress("Create new Row " + idx);
t.rows[l] = new CGRow(l, t);
if (p) t.writeProgress("Create cells");
t.cells[l] = new Array(t.colCount);
for (i = 0; i < t.colCount; i++) {
t.cols[i].index.length = 0;
switch (t.cols[i].title) {
case "ID" :
value = t.lastID;
break;
case "Status" :
value = setSelect(t.lastID, 0);
break;
case "Client" :
value = setCheckBox(t.lastID, 0);
break;
default :
value = "";
};
t.cells[l][i] = new CGCell(t.rows[l], t.cols[i], value);
if (t.cols[i].useAutoFilter) t.cols[i].setFilter();
};
t.lastID++;
t.rIdx.insert(l, idx);
t.rowCount++;
t.vr.length = 0; //VERY IMPORTANT CLEAR INDEX OF VISIBLE ROWS
if (p) t.paint();
};
//------------------------------------------------------------------
//Redefine event handler for use form elements and supports mozilla
//------------------------------------------------------------------
function CT_onMouseEvent(e) {
isShift = e._e.shiftKey;
isCtrl = e._e.ctrlKey;
var src = (ua.moz) ? e._e.target : e._e.srcElement, tg;
if (Def(src)) tg = src.tagName.toLowerCase();
if (tg == "form" || tg == "select"
(tg == "input" && src.type.toLowerCase() == "checkbox")) return;
if (Undef(src.id) && ua.moz) src = src.parentNode;
var parent = CT_getParent(src);
//no object of grid to proceed
if (Undef(src.id) || Undef(parent.id)) {
rng.length = 0; return;
}
CCG = CodeThatGrids[parent.id];
if (Undef(CCG)) {
rng.length = 0; return;
}
var name = src.id.replace(new RegExp(CCG.name), '').replace(/[^0 - 9_]/ig, ""),
r = - 1, c = - 1, type = - 1;
if (Undef(name)) {
return true;
}
if (name.indexOf("_") > - 1) {
r = name.slice(0, name.indexOf("_"));
c = name.slice(name.indexOf("_") + 1);
type = 0;
}
else{
if (src.id.indexOf("col") > - 1) {
c = name; type = 1
};
if (src.id.indexOf("row") > - 1) {
c = name; type = 2
};
if (src.id.indexOf("title") > - 1) {
c = name; type = 4
};
};
//call user handler
switch (type) {
case 0 : e._o = CCG.cells[r][c]; CCG.cells[r][c].callHandler(e); break;
case 2 : e._o = CCG.rows[c]; CCG.rows[c].callHandler(e); break;
case 1 : e._o = CCG.cols[c]; CCG.cols[c].callHandler(e); break;
};
switch (e._e.type) {
case "click" :
switch (type) {
case 0 :
break;
case 1 :
case 2 :
CCG.setMarkRange(c, type);
break;
case 4 :
CCG.cols[c].setTitle();
break;
//default: alert(1);
};
break;
case "dblclick" :
switch (type) {
case 0 :
CCG.setCurCell(CCG.cells[r][c]);
CCG.cells[r][c].setState(2);
break;
case 1 :
CCG.cols[c].setWidth();
break;
case 2 :
CCG.rows[c].setHeight();
break;
};
break;
case "mousedown" :
if (type != 0) return;
CCG.setCurCell(CCG.cells[r][c]);
if (CCG.cells[r][c].state != 2) rng = [r, c];
break;
case "mouseup" :
if (type != 0 || rng.length < 2) {
rng.length = 0; return;
}
CCG.setMarkRange(rng.concat([r, c]), 3);
CCG.msg = "";
CCG.paintBar("sb");
rng.length = 0;
break;
};
};
//---------------------------------------------------
//create gridDef definition
//---------------------------------------------------
var gridDef = {
amountPerPage : 50, //set amount per page in gridObject
datatype : 0,
data : [
[3, "Stiles James", setSelect(3, 1), setCheckBox(3, 0)],
[660, "Leone Andrea", setSelect(660, 1), setCheckBox(660, 1)],
[329, "Gelinas Patricia", setSelect(329, 1), setCheckBox(329, 1)],
[5, "Cooke Dee", setSelect(5, 1), setCheckBox(5, 0)],
[809, "Megna Raven Daria", setSelect(809, 1), setCheckBox(809, 0)],
[9, "Maillet Chad", setSelect(9, 1), setCheckBox(9, 0)],
[751, "Baglini Lisa", setSelect(751, 0), setCheckBox(751, 1)],
[12, "Gato Timothy", setSelect(12, 1), setCheckBox(12, 0)],
[11, "Wheeler Skip", setSelect(11, 1), setCheckBox(11, 0)],
[64, "Davis Mackenzie", setSelect(64, 1), setCheckBox(64, 0)],
[813, "Greene Melissa", setSelect(813, 1), setCheckBox(813, 1)],
[811, "Landry Cain", setSelect(811, 1), setCheckBox(811, 1)],
[364, "Bernard Ashley", setSelect(364, 0), setCheckBox(364, 1)],
[32, "Masabny Rob", setSelect(32, 1), setCheckBox(32, 0)],
[24, "Philbrick John", setSelect(24, 1), setCheckBox(24, 0)],
[25, "Tella Bob", setSelect(25, 1), setCheckBox(25, 0)],
[362, "Doherty Jr. Billy", setSelect(362, 1), setCheckBox(362, 0)],
[359, "Lozeau Danielle", setSelect(359, 0), setCheckBox(359, 0)],
[661, "Spring Rebecca", setSelect(661, 0), setCheckBox(661, 0)],
[348, "Zanidakis Zoe", setSelect(348, 1), setCheckBox(348, 0)],
[358, "Price Dennis", setSelect(358, 1), setCheckBox(358, 0)],
[351, "Ann Rachael", setSelect(351, 1), setCheckBox(351, 0)],
[355, "Brodsky Jason", setSelect(355, 1), setCheckBox(355, 0)],
[200, "Dow Scott", setSelect(200, 1), setCheckBox(200, 0)],
[55, "Perillo Andy", setSelect(55, 1), setCheckBox(55, 0)],
[66, "Burgess Terry", setSelect(66, 1), setCheckBox(66, 0)],
[356, "Vallory Amanda", setSelect(356, 1), setCheckBox(356, 0)],
[410, "wentworth brendan", setSelect(410, 1), setCheckBox(410, 0)],
[369, "Ziobro Peter", setSelect(369, 1), setCheckBox(369, 0)],
[50, "Winters Scott", setSelect(50, 1), setCheckBox(50, 1)],
[370, "Shea Kevin", setSelect(370, 1), setCheckBox(370, 1)],
[344, "Bowring Tina", setSelect(344, 1), setCheckBox(344, 1)],
[810, "Megna Tristan", setSelect(810, 1), setCheckBox(810, 0)],
[341, "peterson william", setSelect(341, 1), setCheckBox(341, 1)],
[795, "Gray Amanda", setSelect(795, 1), setCheckBox(795, 0)],
[143, "Meyer Richard", setSelect(143, 1), setCheckBox(143, 0)],
[145, "Berkrot Peter", setSelect(145, 1), setCheckBox(145, 1)],
[70, "Currier Justine/Janelle", setSelect(70, 1), setCheckBox(70, 0)],
[74, "Perry Kevin", setSelect(74, 1), setCheckBox(74, 0)],
[337, "LOMBARDI TOM", setSelect(337, 1), setCheckBox(337, 0)],
[76, "Steele William", setSelect(76, 1), setCheckBox(76, 1)],
[77, "Smith-Lycette Monique", setSelect(77, 1), setCheckBox(77, 0)],
[717, "Goda Junko", setSelect(717, 1), setCheckBox(717, 0)],
[718, "Kirtz Laurel", setSelect(718, 1), setCheckBox(718, 0)],
[259, "Peters Ellen", setSelect(259, 1), setCheckBox(259, 0)],
[97, "Gorgone Dan", setSelect(97, 1), setCheckBox(97, 0)],
[92, "Barclay Roberta", setSelect(92, 1), setCheckBox(92, 0)],
[86, "Sawyer John", setSelect(86, 1), setCheckBox(86, 0)],
[128, "Donlan Melanie", setSelect(128, 0), setCheckBox(128, 0)],
[94, "Messier Michael", setSelect(94, 0), setCheckBox(94, 0)],
[334, "Allen Candice", setSelect(334, 0), setCheckBox(334, 0)],
[335, "Hadlock Nathan", setSelect(335, 1), setCheckBox(335, 0)],
[365, "Coltart Austin", setSelect(365, 1), setCheckBox(365, 0)],
[123, "Monkiewicz Nicole", setSelect(123, 1), setCheckBox(123, 0)],
[108, "Kiedrowski Meg", setSelect(108, 1), setCheckBox(108, 0)],
[116, "Paulin Amy", setSelect(116, 1), setCheckBox(116, 0)],
[110, "Corlin Laura", setSelect(110, 1), setCheckBox(110, 0)],
[114, "Parks Suzanne", setSelect(114, 1), setCheckBox(114, 0)],
[113, "Davila Maria", setSelect(113, 1), setCheckBox(113, 0)],
[117, "malone kyra", setSelect(117, 1), setCheckBox(117, 0)],
[121, "Himeon stacey", setSelect(121, 1), setCheckBox(121, 0)],
[204, "Lamphier Susan", setSelect(204, 1), setCheckBox(204, 0)],
[205, "Faucher Troy", setSelect(205, 0), setCheckBox(205, 0)],
[138, "Lee Fiona", setSelect(138, 1), setCheckBox(138, 0)],
[349, "DeStefano Bruce", setSelect(349, 1), setCheckBox(349, 0)],
[149, "Davis Isaiah", setSelect(149, 1), setCheckBox(149, 0)],
[328, "Buckley Ryan", setSelect(328, 1), setCheckBox(328, 0)],
[157, "Feign Wendy", setSelect(157, 1), setCheckBox(157, 0)],
[378, "deyeva ilona", setSelect(378, 1), setCheckBox(378, 0)],
[379, "Dundas IV Everett", setSelect(379, 1), setCheckBox(379, 0)],
[405, "Nietsche Michelle", setSelect(405, 1), setCheckBox(405, 0)],
[670, "Mendonca Cathy", setSelect(670, 1), setCheckBox(670, 0)],
[161, "Andrews Victor", setSelect(161, 1), setCheckBox(161, 0)],
[340, "Harris Andrew", setSelect(340, 1), setCheckBox(340, 0)],
[790, "Robillard Jennifer", setSelect(790, 0), setCheckBox(790, 0)],
[791, "Hauger Gary", setSelect(791, 1), setCheckBox(791, 0)],
[422, "McDonough Karen", setSelect(422, 0), setCheckBox(422, 0)],
[423, "Lavoie Paul", setSelect(423, 1), setCheckBox(423, 0)],
[305, "Tankanow Ron", setSelect(305, 1), setCheckBox(305, 0)],
[812, "Landry Drew", setSelect(812, 1), setCheckBox(812, 0)],
[372, "Edmonds Megan", setSelect(372, 1), setCheckBox(372, 0)],
[375, "Hebert Scott", setSelect(375, 1), setCheckBox(375, 0)],
[574, "Romano Jay", setSelect(574, 1), setCheckBox(574, 0)],
[171, "Armstrong Hadley", setSelect(171, 1), setCheckBox(171, 0)],
[788, "Arroyo Joseph", setSelect(788, 0), setCheckBox(788, 0)],
[266, "DeCoff William", setSelect(266, 0), setCheckBox(266, 1)],
[553, "Molidor CJ", setSelect(553, 1), setCheckBox(553, 1)],
[176, "Hassinger Norm", setSelect(176, 1), setCheckBox(176, 0)],
[276, "Hayward Lauren", setSelect(276, 1), setCheckBox(276, 1)],
[814, "Frasca Sarena", setSelect(814, 1), setCheckBox(814, 0)],
[306, "Barron Dick", setSelect(306, 1), setCheckBox(306, 0)],
[786, "Window Seth", setSelect(786, 1), setCheckBox(786, 0)],
[278, "McIsaac Jim", setSelect(278, 1), setCheckBox(278, 0)],
[183, "Gould Ryan", setSelect(183, 1), setCheckBox(183, 1)],
[188, "Zox Kathryn", setSelect(188, 1), setCheckBox(188, 1)],
[376, "Cirone Kevin", setSelect(376, 1), setCheckBox(376, 1)],
[377, "Azevedo Robert", setSelect(377, 1), setCheckBox(377, 1)],
[346, "Tilney H. Webb", setSelect(346, 1), setCheckBox(346, 1)],
[333, "Laverdiere Tara", setSelect(333, 1), setCheckBox(333, 0)],
[187, "Detrik Tom", setSelect(187, 1), setCheckBox(187, 0)],
[212, "Veilleux Michelle", setSelect(212, 1), setCheckBox(212, 0)],
[330, "Daria Kay", setSelect(330, 1), setCheckBox(330, 0)],
[190, "WARREN VICTOR", setSelect(190, 1), setCheckBox(190, 0)],
[193, "papa doug", setSelect(193, 1), setCheckBox(193, 0)],
[192, "German Nancy", setSelect(192, 1), setCheckBox(192, 0)],
[221, "Bard Kimberly", setSelect(221, 0), setCheckBox(221, 0)],
[223, "rose elizabeth", setSelect(223, 0), setCheckBox(223, 0)],
[225, "Mentink Jim", setSelect(225, 1), setCheckBox(225, 0)],
[254, "Boiros Ashleigh", setSelect(254, 1), setCheckBox(254, 0)],
[807, "Torres Araceli", setSelect(807, 1), setCheckBox(807, 0)],
[373, "Jackson Maria", setSelect(373, 1), setCheckBox(373, 0)],
[274, "Clay Vic", setSelect(274, 1), setCheckBox(274, 0)],
[806, "Savo Dominic", setSelect(806, 1), setCheckBox(806, 0)],
[577, "Benton Thomas", setSelect(577, 1), setCheckBox(577, 0)],
[233, "Mehmed Christopher", setSelect(233, 1), setCheckBox(233, 0)],
[235, "Cooley Tera", setSelect(235, 1), setCheckBox(235, 0)],
[662, "Momplaisir Mark", setSelect(662, 1), setCheckBox(662, 0)],
[331, "Herrick Megan", setSelect(331, 1), setCheckBox(331, 0)],
[258, "Beaucicaut Elizabeth", setSelect(258, 1), setCheckBox(258, 0)],
[241, "Brelis Maggie", setSelect(241, 1), setCheckBox(241, 0)],
[271, "Brown Camden", setSelect(271, 1), setCheckBox(271, 0)],
[244, "White Nathan", setSelect(244, 1), setCheckBox(244, 0)],
[243, "Sullivan Marie", setSelect(243, 1), setCheckBox(243, 0)],
[247, "Sechrest Ric", setSelect(247, 0), setCheckBox(247, 1)],
[250, "Roosevelt Brian", setSelect(250, 1), setCheckBox(250, 1)]
],
colDef : [
{
title : "ID",
type : "Number",
isVisible : 1,
isReadOnly : 1,
width : 50
},
{
title : "Name",
type : "String",
isVisible : 1,
isReadOnly : 0,
width : 100
},
{
title : "Status",
type : "HTML",
isVisible : 1,
isReadOnly : 1,
width : 100,
alignment : 'center'
},
{
title : "Client",
type : "HTML",
isVisible : 1,
isReadOnly : 0,
width : 100,
alignment : 'center'
} ],
//set table style, here you set size of whole grid
tableStyle : {
width : 400,
height : 400
},
//customize toolbar
toolBar : {
height : 29,
bgcolor : "#bbbbbb",
defaultClass : {
bordercolor : "#bbbbbb", color : "#000000"
},
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",
showMessage : true
},
{
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",
showMessage : true
},
{
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",
showMessage : true
},
{ },
{
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",
showMessage : true
},
{
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",
showMessage : true
},
{
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",
showMessage : true
},
{ },
{
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",
showMessage : false
},
{
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",
showMessage : false
},
{
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",
showMessage : false
},
{
name : "setsearch",
img_on : {
src : "img/setsearch.gif", width : "16", height : "16"
},
img_off : {
src : "img/setsearch_off.gif", width : "16", height : "16"
},
text : "Search",
showMessage : false
},
{
name : "resetsearch",
img_on : {
src : "img/resetsearch.gif", width : "16", height : "16"
},
img_off : {
src : "img/resetsearch_off.gif", width : "16", height : "16"
},
text : "Reset search",
showMessage : false
},
{
name : "setamount",
img_on : {
src : "img/setamount.gif", width : "16", height : "16"
},
img_off : {
src : "img/setamount_off.gif", width : "16", height : "16"
},
text : "Amount",
showMessage : false
} ]
}
};
//---------------------------------------------------
//create Object CodeThatGrid
//---------------------------------------------------
var g = new CCodeThatGrid("g", 1, 4);
g.init(gridDef);
g.doAction();
g.setLastID();
//-->
</script>
<p>Send data at the server
<p><textarea name="data" cols=40 rows=5></textarea>
<p><input value="Send" type="submit"
onClick="this.form.data.value = getDataFromGrid(g); alert('Data submitted!');" >
</form>
|