CodeThatTable - Data editing Example
Note. Only changed rows submitted.
<html>
<head>
<script language="javascript" src="../Scripts/codethatsdk.js"></script>
<script language="javascript" src="../Scripts/codethattype.js"></script>
<script language="javascript" src="../Scripts/codethattablepro.js"></script>
<style>
TH{font-family:Arial;font-size:11px;color:#000000;}
TD{font-family:Arial;font-size:11px;color:#000000;}
A{text-decoration:none;}
.title{background-color:#808080;color:#ffffff;font-family:Tahome;text-transform:upper;}
.edit{background-color:yellow;}
.even{background-color:#ffffff;}
.odd{background-color:#fbfbfb;}
.mark{background-color:#aaaaaa;}
.hover{background-color:#eeeeff;}
.common{width:100%;}
</style>
</head>
<body>
<script language="javascript">
//make our own type
var MYTYPE_FORMAT="";
function parseMyType(s){
if (!s) return DEFAULT_RESULT;
return s;
};
function formatMyType(o){
if (!o) return '';
return o.substring(4);
};
// analize column #2 and change its control in runtime depend on selected values
function syncControl(idx){
var i, test = [], res;
//get selected values from column #2
for (i = 0; i < idx.length; i++){
test[i] = t.cells[idx[i]][2].data;
};
res = test.isSame(); //test is each element of arrat the same; res is '' if not or value if yes
if (res == ''){//different values in selection
t.cols[2].value = ['TEST1', 'TEST2', 'TEST3'] ;
}else{ // the same - use old value
t.cols[2].value = ['ANMS, FAF', 'AMNS, CRS, FAF'] ;
};
//1 variant :: reload table, show to user changes
//t.setPage(t.page);
//2 variant :: reload only 1 control
t.printEditValue(2, res);
};
//make popup control
function popupControl(){
//get value from selection
var i, test = [], res, idx = t.getKeyArray(-1);
for (i = 0; i < idx.length; i++){
test[i] = t.cells[idx[i]][0].data;
};
res = test.isSame();
//open extended control
var w = window.open('', 'control', 'width=400,height=200,status=1,menubar=0,toolbar=0');
var d = w.document;
d.open();
//create form in run-time and set res as value of input field and method setEditValue is onClick reaction
//you can use all objects of parent window as window.parent.object
//so our table is window.parent.t
d.write('<html>\
<head><title>test control</title>\
<body>\
<form onSubmit="return false;">\
Input value <input type="text" name="id" value="' + res + '" size="30">\
<input type="button" value="ok" onClick="window.opener.t.setEditValue(0, this.form.id.value);window.close();">\
</form>\
</body>\
</html>');
d.close();
};
//Table Definition
var tDef={
amountPerPage:15,
useMultiSort : 0,
useSort : 1,
useResetPanel:0,
useSearchPanel:0,
useAmountPanel:0,
rowHandler:syncControl,
keyCol:-1,
useEdit:1,
editIndicator:'*',
editTitle:'edit',
editClass:'edit',
tableStyle:{
tableClass: 'common',
thClass : 'title',
border : 0,
cellpadding: 1,
cellspacing: 1
},
rowStyle : {
markClass: 'mark',
darkClass: 'even',
lightClass: 'odd',
hoverClass: 'hover'
},
imgSortAscActive: {src: "imgs/asc.gif", width: 14, height: 11, alt: "A-Z"},
imgSortDescActive: {src: "imgs/desc.gif", width: 14, height: 11, alt: "Z-A"},
colDef:[
{
type:'MyType',
title : 'ID',
width : '15%',
alignment:'center',
tooltip:'This is ID',
input:'button',
value:['changeID', 'popupControl()'] //[buttonName, buttonAction]
},
{
type:'String',
title:'PST',
width : '10%',
tooltip : 'This is PST',
input:'select', //set here type of input [select, radio, checkbox, text]
value:['OOS', 'IS', 'OOS-AU'],
nullValue : '-Set PST-'
},
{
type:'String',
title:'SST',
width : '15%',
alignment:'right',
input:'select', //set here type of input [select, radio, checkbox, text]
value:['ANMS, FAF', 'AMNS, CRS, FAF'],
nullValue : '-Set SST'
},
{
type:'String',
title:'UNDERDESCR',
width : '20%',
alignment:'center',
tooltip:' User description <br> A user-defined character string <br> This parameter helps user track a profile',
input:'radio', //set here type of input [select, radio, checkbox, text]
value:['client', 'user']
},
{
type:'String',
title:'MAINTENANCE',
width : '10%',
input:'select', //set here type of input [select, radio, checkbox, text]
value:['LOS', 'NONE'],
nullValue : '-filter2-'
},
{
type:'String',
title:'PROFILE',
width : '10%',
input:'checkbox',
value: ['Yes', 'No'] //[value when checked, value when unchecked]
},
{
type:'String',
title:'XDSRO',
width : '20%',
input:'text',
value:''
}
],
datatype : 0,
data:[
['ANSI N200-1-17-01(MAR2)', 'OOS-AU', 'AMNS, CRS, FAF', 'client', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-02(MAR2)', 'OOS-AU', 'AMNS, CRS, FAF', 'client', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-03(MAR2)', 'OOS-AU', 'ANMS, FAF', 'client', 'LOS', 'No', '16000'],
['ANSI N200-1-17-04(MAR2)', 'OOS-AU', 'ANMS, FAF', 'client', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-05(MAR2)', 'OOS-AU', 'ANMS, FAF', 'user', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-06(MAR2)', 'OOS-AU', 'ANMS, FAF', 'user', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-07(MAR2)', 'OOS-AU', 'ANMS, FAF', 'user', 'LOS', 'No', '16000'],
['ANSI N200-1-17-08(MAR2)', 'OOS-AU', 'ANMS, FAF', 'user', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-09(MAR2)', 'OOS-AU', 'ANMS, FAF', 'client', 'LOS', 'No', '16000'],
['ANSI N200-1-17-10(MAR2)', 'OOS-AU', 'ANMS, FAF', 'client', 'LOS', 'Yes', '16000'],
['ANSI N200-1-17-11(MAR2)', 'OOS-AU', 'ANMS, FAF', 'user', 'LOS', 'No', '16000'],
['ANSI N200-1-17-12(MAR2)', 'OOS-AU', 'ANMS, FAF', 'client', 'LOS', 'Yes', '16000']
]
};
var t = new CCodeThatTable("t");
t.loadData(tDef);
t.doAction();
</script>
<b>Note. Only changed rows submitted.
<form onsubmit="this.data.value=t.exportEditValues(); alert('Data submitted'); return false;">
<textarea name="data" rows="10" cols="40">
</textarea>
<br/><input type="submit">
</form>
</body>
</html>