我是jqgrid的新手,我正在尝试实现以下方案,但我无法以正确的方式获得它。
这是我的场景:
- 我有三行,例如个人电子邮件,手机号码和Twitter URL。它需要具有另一种列数据类型,可能是电子邮件,电话和URL等值。
- 现在,我将每行输入每个行,以执行一些诸如电子邮件格式或电话格式之类的验证。
- 当我按添加按钮时,它需要创建一个新的行,并向我询问信息每列,例如列的名称和数据类型。
- 当我输入每一行的值时,它需要基于数据类型列。
- 如果我按"编辑"按钮,则整个网格需要编辑,并且在编辑事件触发后,需要对每个单元进行验证。
我的代码:
$(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;
如果我理解您的问题确实归结为验证,则可以添加一个编辑功能,然后称为自定义验证。
ex:
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
);
验证(根据您的需求可能是不同的或相同的)
function validate_add(posdata, obj) {//validation code}
function validate_edit(posdata, obj) {//validation code}
参考:添加和编辑时的JQGrid不同的编辑
最后,它确实会清理您编写的一堆代码,以尝试与网格进行验证。