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>