JqGrid，使用navGrid时如何格式化错误消息
JqGrid, how can I format error messages when using navGrid
jqGrid 4.13.6-pre - free jqGrid
我正在使用 navGrid 和内联编辑，但在格式化从服务器发回的验证消息时遇到了问题。验证消息从内联编辑返回时显示正常，但在从网格导航访问的 Add/Edit 表单上看起来不正常。
我读了很多关于 errorTextFormat 事件的文章，它似乎完全符合我的要求，但我似乎无法弄清楚从网格导航打开表单时如何访问它。我确定有一种简单的配置方法，但我一直没弄明白。
$(function() {
var lastSel = 0;
$("#Grid")
.jqGrid({
url: '/url/to/griddata',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: false, formatter: null, edittype: 'text' },
{ name: 'Name', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: true, formatter: null, edittype: 'text', editoptions: { maxlength: 256, value: null, required: true } }],
pager: '#GridPager',
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'SortColumn',
order: 'SortOrder',
search: 'Search',
nd: 'nd',
npage: 'null'
},
rowNum: 60,
rowList: [
15,
30,
60,
120
],
sortname: "Name",
sortorder: "asc",
viewrecords: true,
hidegrid: false,
gridview: true,
caption: '',
width: 980,
height: 100,
editurl: '/my/edit/url',
edit: {
errorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
},
jsonReader: {
total: 'TotalPages',
page: 'CurrentPage',
records: 'TotalRecords',
root: 'Rows',
id: 'Id',
repeatitems: false
},
onSelectRow: function(id) {
if (id && id !== lastSel) {
jQuery('#Grid').restoreRow(lastSel);
lastSel = id;
}
$('#Grid').jqGrid('editRow', id,
{
keys: true
});
}
});
$("#Grid").filterToolbar({ autosearch: true, searchOnEnter: false });
$("#Grid").navGrid('#GridPager', {
del: false, search: false, editerrorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
});
这是标记。
jqGrid 没有 edit 选项，navGrid 也没有 editerrorTextFormat 属性。通过使用 formEditing 选项很容易修复您的代码，它允许指定直接或间接在网格中使用的 editGridRow 方法 的 默认值。您只需将 edit 选项重命名为 formEditing，您的代码就可以正常工作。重要的只是服务器在报告错误时应该使用一些错误 HTTP 状态代码（例如 400 或更高）。错误代码 500 或更高版本在我看来是您的最佳选择。
以同样的方式，您可以在免费 jqGrid 的 searching 选项中指定 filterToolbar 或搜索对话框的选项。您可以在 jqGrid 的 navOptions 选项中指定 navGrid 的默认选项。
我建议您另外使用 jqGrid 的 savedRow 参数而不是 lastSel 变量。该参数将由 jqGrid 在开始内联编辑或单元格编辑时填充。如果包含可编辑值的数组 before 修改和 id 属性 另外。因为你计算
我建议您另外使用 pager: true 而不是 pager: '#GridPager' 并跳过 navGrid 或 inlineNav 的 '#GridPager' 参数。免费的 jqGrid 会自动为寻呼机生成 <div>，它会把唯一的 id 分配给 div，它会将 pager: true 参数修改为 '#generatesIdValueOfTheDiv'。您的代码会更短一些，更易于阅读和维护。
最终代码可能如下所示
$(function() {
$("#Grid")
.jqGrid({
url: '/url/to/griddata',
datatype: 'json',
mtype: 'POST',
colModel: [
{ name: 'Id', align: 'center' },
{ name: 'Name', align: 'center', editable: true,
editoptions: { maxlength: 256, required: true } }
],
pager: true,
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'SortColumn',
order: 'SortOrder',
search: 'Search'
},
rowNum: 60,
rowList: [
15,
30,
60,
120
],
sortname: "Name",
viewrecords: true,
hidegrid: false,
width: 980,
height: 100,
editurl: '/my/edit/url',
jsonReader: {
total: 'TotalPages',
page: 'CurrentPage',
records: 'TotalRecords',
root: 'Rows',
id: 'Id',
repeatitems: false
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
},
inlineEditing: {
keys: true
},
searching: {
searchOnEnter: false
},
navOptions: {
del: false,
search: false
},
onSelectRow: function (rowid) {
var $self = $(this), i,
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
for (i = 0; i < savedRows.length; i++) {
if (savedRows[i].id !== rowid) {
// cancel editing of not saved rows
$self.jqGrid("restoreRow", savedRows[i].id);
}
}
$self.jqGrid("editRow", rowid);
}
})
.jqGrid("filterToolbar");
.jqGrid("navGrid");
});
（我在 formEditing 中添加了一些经常使用的属性。您可以删除不需要的属性）。我删除了 colModel 的一些不需要的选项和一些不需要的属性，因为您指定了 default 值。
jqGrid 4.13.6-pre - free jqGrid
我正在使用 navGrid 和内联编辑，但在格式化从服务器发回的验证消息时遇到了问题。验证消息从内联编辑返回时显示正常，但在从网格导航访问的 Add/Edit 表单上看起来不正常。
我读了很多关于 errorTextFormat 事件的文章，它似乎完全符合我的要求，但我似乎无法弄清楚从网格导航打开表单时如何访问它。我确定有一种简单的配置方法，但我一直没弄明白。
$(function() {
var lastSel = 0;
$("#Grid")
.jqGrid({
url: '/url/to/griddata',
datatype: 'json',
mtype: 'POST',
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: false, formatter: null, edittype: 'text' },
{ name: 'Name', hidden: false, search: true, width: 150, align: 'center', sortable: true, editable: true, formatter: null, edittype: 'text', editoptions: { maxlength: 256, value: null, required: true } }],
pager: '#GridPager',
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'SortColumn',
order: 'SortOrder',
search: 'Search',
nd: 'nd',
npage: 'null'
},
rowNum: 60,
rowList: [
15,
30,
60,
120
],
sortname: "Name",
sortorder: "asc",
viewrecords: true,
hidegrid: false,
gridview: true,
caption: '',
width: 980,
height: 100,
editurl: '/my/edit/url',
edit: {
errorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
},
jsonReader: {
total: 'TotalPages',
page: 'CurrentPage',
records: 'TotalRecords',
root: 'Rows',
id: 'Id',
repeatitems: false
},
onSelectRow: function(id) {
if (id && id !== lastSel) {
jQuery('#Grid').restoreRow(lastSel);
lastSel = id;
}
$('#Grid').jqGrid('editRow', id,
{
keys: true
});
}
});
$("#Grid").filterToolbar({ autosearch: true, searchOnEnter: false });
$("#Grid").navGrid('#GridPager', {
del: false, search: false, editerrorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
});
这是标记。
jqGrid 没有 edit 选项，navGrid 也没有 editerrorTextFormat 属性。通过使用 formEditing 选项很容易修复您的代码，它允许指定直接或间接在网格中使用的 editGridRow 方法 的 默认值。您只需将 edit 选项重命名为 formEditing，您的代码就可以正常工作。重要的只是服务器在报告错误时应该使用一些错误 HTTP 状态代码（例如 400 或更高）。错误代码 500 或更高版本在我看来是您的最佳选择。
以同样的方式，您可以在免费 jqGrid 的 searching 选项中指定 filterToolbar 或搜索对话框的选项。您可以在 jqGrid 的 navOptions 选项中指定 navGrid 的默认选项。
我建议您另外使用 jqGrid 的 savedRow 参数而不是 lastSel 变量。该参数将由 jqGrid 在开始内联编辑或单元格编辑时填充。如果包含可编辑值的数组 before 修改和 id 属性 另外。因为你计算
我建议您另外使用 pager: true 而不是 pager: '#GridPager' 并跳过 navGrid 或 inlineNav 的 '#GridPager' 参数。免费的 jqGrid 会自动为寻呼机生成 <div>，它会把唯一的 id 分配给 div，它会将 pager: true 参数修改为 '#generatesIdValueOfTheDiv'。您的代码会更短一些，更易于阅读和维护。
最终代码可能如下所示
$(function() {
$("#Grid")
.jqGrid({
url: '/url/to/griddata',
datatype: 'json',
mtype: 'POST',
colModel: [
{ name: 'Id', align: 'center' },
{ name: 'Name', align: 'center', editable: true,
editoptions: { maxlength: 256, required: true } }
],
pager: true,
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'SortColumn',
order: 'SortOrder',
search: 'Search'
},
rowNum: 60,
rowList: [
15,
30,
60,
120
],
sortname: "Name",
viewrecords: true,
hidegrid: false,
width: 980,
height: 100,
editurl: '/my/edit/url',
jsonReader: {
total: 'TotalPages',
page: 'CurrentPage',
records: 'TotalRecords',
root: 'Rows',
id: 'Id',
repeatitems: false
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: function (data) {
alert('fired');
console.log(data);
return "error here";
}
},
inlineEditing: {
keys: true
},
searching: {
searchOnEnter: false
},
navOptions: {
del: false,
search: false
},
onSelectRow: function (rowid) {
var $self = $(this), i,
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
for (i = 0; i < savedRows.length; i++) {
if (savedRows[i].id !== rowid) {
// cancel editing of not saved rows
$self.jqGrid("restoreRow", savedRows[i].id);
}
}
$self.jqGrid("editRow", rowid);
}
})
.jqGrid("filterToolbar");
.jqGrid("navGrid");
});
（我在 formEditing 中添加了一些经常使用的属性。您可以删除不需要的属性）。我删除了 colModel 的一些不需要的选项和一些不需要的属性，因为您指定了 default 值。