ligerui grid行编辑示例，具备新增行、删除行功能，可在修改某个cell之后，如果录入错误，可以提醒用户。
<%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getContextPath(); %> <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Simple Data</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <SCRIPT type="text/javascript"> var contextpath = "<%=path%>"; </SCRIPT> <style type="text/css"> .myul li{float:left;width:100px;display:inline;} </style> <link href="<%=path %>/frameworks/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="<%=path %>/frameworks/jquery/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerDateEditor.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script> <script src="<%=path %>/frameworks/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> <script src="<%=path %>/js/json2.js" type="text/javascript"></script> <script src="<%=path %>/js/uuid.js" type="text/javascript"></script> <SCRIPT type="text/javascript"> var manager, g; $(document).ready(function(){ $("#leafOpt").click(function(){ $("#urlDom").show(); }); $("#dirOpt").click(function(){ $("#urlDom").hide(); }); //初始化grid function itemclick(item) { alert(item.text); } var typeData = [{ val: 'url', text: 'URL' }, { val: 'btn', text: '按钮'}, { val: 'code', text: '分级编码'}]; var rowData = { Rows: []}; g = manager = $("#maingrid").ligerGrid({ columns: [ { display: '名称', name: 'name', align: 'left', 120,editor: { type: 'text' } } , { display: '类型', 60, name: 'type', editor: { type: 'select', data: typeData, valueColumnName: 'val' }, render: function (item) { for (var i = 0; i < typeData.length; i++) { if (typeData[i]['val'] == item.type) return typeData[i]['text'] } } }, { display: '值', name: 'value', 360, align: 'left',editor: { type: 'text' } } ], sortName: 'name',enabledEdit: true, data: rowData, onSelectRow: function (rowdata, rowindex) { $("#txtrowindex").val(rowindex); }, onBeforeEdit: onBeforeEdit, onBeforeSubmitEdit: onBeforeSubmitEdit,onAfterEdit: onAfterEdit, '98%', height: '350', usePager: false, clickToEdit: true, checkbox: true }); }); function deleteRow() { g.deleteSelectedRow(); } function addNewRow() { g.addRow({ id : 0, name:'', type:'url', value:'' }); } //设置name前缀 function onBeforeEdit(e) { var data = manager.getData(); return true; } //限制年龄 function onBeforeSubmitEdit(e) { if (e.columnname == "Age") { if (e.value < 20 || e.value > 30) return false; } return true; } //编辑后事件 function onAfterEdit(e) { //当切换类型时，自动填充名称前缀 //alert(JSON.stringify(e.record)); //alert("after, e.column: "+JSON.stringify(e.column)); if(e.column.name=="type") { var data = manager.getData(); var d = data[e.rowindex]; var name = ''; if(d.type=="url") name="url"; else if(d.type=="code") name="code_"; else if(d.type=="btn") name="btn_"; g.updateCell('name', name, e.record); } //当名称修改后，校验前缀是否与类型匹配 if (e.column.name == "name") { var d = e.record; var cellObj = g.getCellObj(d, e.column); //var name = d[e.column.name]; var name = $(cellObj).text(); if(name.length<1) return true; if(d.type=="url" && name.indexOf(d.type)!=0) { alert('你刚才编辑的值录入不正确！（类型为URL时，名称必须以url开头（小写））'); //cellObj.focus(); //g.setCellEditing(d, e.column, editing); return false; } else if(d.type=="code" && name.indexOf(d.type)!=0) { alert('你刚才编辑的值录入不正确！（类型为分级编码时，名称必须以code_开头（小写））'); //g.setCellEditing(d, e.column, editing); return false; } else if(d.type=="url" && name.indexOf(d.type)!=0) { alert('你刚才编辑的值录入不正确！（类型为按钮时，名称必须以btn_开头（小写））'); //g.setCellEditing(d, e.column, editing); return false; } } return true; } </script> </head> <body> <table> <tr> <td colspan=2> <input type=radio id="dirOpt" name="typeOpt" checked><label for="dirOpt">目录节点</label> <input type=radio id="leafOpt" name="typeOpt"><label for="leafOpt">叶子节点</label> </td> </tr> <tr> <td><label>节点名称</label></td> <td><input type="text" id="nodeNameTxt" size="40"></td> </tr> <tr id="urlDom" style="display:none"> <td><label>叶子url</label></td> <td><input type="text" id="urlTxt" size="70"></td> </tr> <tr> <td><label>分级编码</label></td> <td><input type="text" border="0" style="border:0;" readonly id="nodeCodeTxt" size="40"></td> </tr> </table> <div> <a class="l-button" style="60px;float:left; margin-left:10px;" onclick="addNewRow()">新增行</a> <a class="l-button" style="60px;float:left; margin-left:10px;" onclick="deleteRow()">删除行</a> </div> <div id="maingrid"></div> </body> </html>
