JqG​​rid，使用 navGrid 时如何格式化错误消息

Question

jqGrid 4.13.6-pre - free jqGrid

我正在使用 navGrid 和内联编辑，但在格式化从服务器发回的验证消息时遇到问题。验证消息从内联编辑返回时看起来不错，但在从网格导航访问的“添加/编辑”表单上看起来不太好。

我阅读了很多关于 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";
            }
        });

这里是标记。

Answer 1

jqGrid 没有edit 选项，navGrid 也没有editerrorTextFormat 属性。使用formEditing 选项很容易修复您的代码，它允许指定在网格中直接或间接使用的editGridRow 方法的默认值。您只需将edit 选项重命名为formEditing，您的代码就可以工作了。重要的是服务器应该使用一些错误 HTTP 状态代码以防报告错误（例如 400 或更高）。在我看来，错误代码 500 或更高版本是您的最佳选择。

同样你可以在free jqGrid的searching选项中指定filterToolbar或Searching Dialog的选项。您可以在 jqGrid 的 navOptions 选项中指定 navGrid 的默认选项。

我建议您另外使用 jqGrid 的 savedRow 参数而不是 lastSel 变量。该参数将在开始行内编辑或单元格编辑时由 jqGrid 填充。如果包含可编辑值数组之前 修改和id 属性另外。因为你调

我建议您另外使用pager: true 而不是pager: '#GridPager' 并跳过navGrid 或inlineNav 的'#GridPager' 参数。免费的jqGrid会自动为pager生成<div>，它会为div分配唯一的id，并将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 值。