如何实现jqgrid内联编辑和自定义validation？

我是jqGrid的新手，我正在尝试实现以下方案，但我无法以正确的方式得到它。

这是我的场景：

1. 我有三行，如个人电子邮件，手机号码和推特url。 它需要有另一个列数据类型，可能是电子邮件，电话和url等值。
2. 现在我将输入每个行的值，以便执行某些validation，如电子邮件格式或电话格式。
3. 当我按下“添加”按钮时，它需要创建一个新行并询问每列的信息，例如列名称和数据类型。
4. 当我输入每行的值时，它需要根据数据类型列进行validation。
5. 如果按下“编辑”按钮，则整个网格需要可编辑，并且需要在编辑事件触发后对每个单元格执行validation。

我的代码：

$(document).ready(function () { //debugger; var val; var lastsel2; jQuery("#list").jqGrid({ datatype: "local", height: 250, width: 770, colNames: ['Mechanism', 'Data Type', 'Value', 'Active Flag', 'Created'], colModel: [ { name: 'Mechanism', index: 'Mechanism', width: 175, editable: true }, { name: 'DataType', index: 'Datatype', width: 175, editable: true }, { name: 'Value', index: 'Value', width: 105, editable: true, editrules: { custom: true, custom_func: validate} }, {name: 'ActiveFlag', width: 112, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" }, { name: 'Created', index: 'Created', width: 124}] }); $('#save').live('click', function () { var ids = $("#list").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var val = $("#list").jqGrid('getCell', ids[i], 'Value'); var dataType = $("#list").jqGrid('getCell', ids[i], 'DataType'); $('#colValue').html(val + dataType); var va = $('#colValue').find('input[name=value]').val(); var daT = $('#colValue').find('input[name=Datatype]').attr('value'); switch (daT) { case "Phone": if (!$.jgrid.isEmpty(va)) { } else alert("Phone Number Field is required"); break; case "Email": if (!$.jgrid.isEmpty(va)) { } else alert("Email Field is required"); break; case "URL": if (!$.jgrid.isEmpty(va)) { } else alert("URL Field is required") break; case "": alert("Fields are not null") } } }); $('input[value=Edit]').click(function () { var ids = $('#list').jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { //$('#list').jqGrid('editRow', ids[i]); jQuery('#list').jqGrid('editRow', ids[i], true); } }); var data = [{ Mechanism: "Mobile Phone", DataType: "Phone" }, { Mechanism: "Personal Email", DataType: "Email" }, { Mechanism: "Facebook URL", DataType: "URL"}]; for (var i = 0; i <= data.length; i++) jQuery("#list").jqGrid('addRowData', i + 1, data[i]); val = i; 

Answer 1

如果我理解你的问题，这一切都归结为validation，可以添加添加编辑function，然后调用自定义validation。

例如：

 jQuery("#list").navGrid('#pager', { add: true, addtext: 'Add', edit: true, edittext: 'Edit', del: true, deltext: 'Del', search: true, searchtext: 'Find', refresh: true }, //options { reloadAfterSubmit: true, beforeSubmit: validate_edit }, // edit options { reloadAfterSubmit: true, beforeSubmit: validate_add }, // add options {}, //del options {} //search options ); 

validation（根据您的需要可能不同或相同）

 function validate_add(posdata, obj) {//validation code} function validate_edit(posdata, obj) {//validation code} 

参考： jqgrid添加和编辑时的不同编辑规则

最后，它会真正清理你编写的一堆代码，试图与网格进行交互以进行validation。