Example of a sortable and editable table with action cells to add new data rows and to minimize the complete table
Try to enter a non-digit into column two. The validator will prohibit this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JSM Test Page</title>
<link rel=stylesheet type="text/css" href="../jsm-documentation.css">
<style>
body {
margin: 10px 0px 0px 10px;
background-color:#ffffff;
color: #000000;
}
</style>
<script src="jsm.js" type="text/javascript"></script>
<link rel=stylesheet type="text/css" href="css/jsm.css">
<script>
//your onSaveRow Event
function jsmOnSaveRow(table, rowIdx) {
var message="Data: \n";
var tds = table.getTds(rowIdx);
for (var tdIdx in tds) {
var td = tds[tdIdx];
if (td.getMetaData('actionCell') != 'true') message=message+"Table cell is dirty: " + td.isDirty() + " and has value: " + td.getValue() + " - selectFieldValue: " + td.getMetaData("selectFieldValue") + "\n";
}
alert(message);
table.getRow(rowIdx).setDirty(false);
}
</script>
</head>
<body>
<div id="myTableContainer"></div>
<script>
myTable = new JsmTable("myTableContainer", "myTable");
myTable.addHeaderActionCell(jsmAddRowActionCell).addHeaderActionCell(jsmHideTableActionCell);
myTable.addRowActionCell(jsmEditRowActionCell).addRowActionCell(jsmDeleteRowActionCell);
myTable.setHeaderRow(new JsmTr().addCell(new JsmTh("one").setAttribute("width", "300")).addCell(new JsmTh("two").setAttribute("width", "150")).addCell(new JsmTh("country").setAttribute("width", "150")).addCell(new JsmTh("yes/no")));
myTable.addComparator("two", JsmNumberComparator);
myTable.addWidget(0, new JsmTextField()).addWidget(1, new JsmTextField().addValidator(new JsmNumbersOnlyValidator())).addWidget(2, new JsmSelectField([{'value':0, 'label':"All"},{'value':1, 'label':"UK"},{'value':2, 'label':"Ireland"}]).addOption(3, 'Germany')).addWidget(3, new JsmCheckBox(false, "yes", "no"));
myTable.addRow(new JsmTr().addCell(new JsmTd("one")).addCell(new JsmTd("1")).setMetaData("id", "1").setMetaData("lala", "lala").addCell(new JsmTd("")).addCell(new JsmTd("yes")));
myTable.addRow(new JsmTr().addCell(new JsmTd("two")).addCell(new JsmTd("2")).setMetaData("id", "2").addCell(new JsmTd("UK")).addCell(new JsmTd("yes")));
myTable.addRow(new JsmTr().addCell(new JsmTd("three")).addCell(new JsmTd("3")).setMetaData("id", "3").addCell(new JsmTd("")).addCell(new JsmTd("no")));
myTable.addRow(new JsmTr().addCell(new JsmTd("ten")).addCell(new JsmTd("10")).setMetaData("id", "4").addCell(new JsmTd("")).addCell(new JsmTd("yes")));
myTable.addRow(new JsmTr().addCell(new JsmTd("eleven")).addCell(new JsmTd("11")).setMetaData("id", "5").addCell(new JsmTd("")).addCell(new JsmTd("no")));
myTable.addRow(new JsmTr(new JsmTd("twelve"), new JsmTd("12"), new JsmTd(""), new JsmTd("yes")));
myTable.sort("two");
myTable.render();
function saveEditedValuesBackToModel() {
for (rowIndex in myTable.getRows()) {
var row = myTable.getRow(rowIndex);
if (row.isEditMode()) {
_jsmOnSaveRow(myTable, rowIndex, -1);
row.setEditMode(false);
myTable.render();
}
}
}
</script>
<br>
<button onclick="saveEditedValuesBackToModel();">Alternative button outside the table to save an edit change</button>
<br><br>
Try to enter a non-digit into column two. The validator will prohibit this.
</body>
</html>