Jqgrid 自定义格式化程序和编辑模式答案

【问题标题】：Jqgrid custom formatter and edit modeJqgrid 自定义格式化程序和编辑模式
【发布时间】：2017-10-12 03:36:39
【问题描述】：

似乎使用自定义格式化程序会使单元格卡在编辑模式中，并且以前编辑的行永远不会恢复。

JS，此处定义的网格

 $(priceListGrid).jqGrid({
            datatype: 'local',          
            url: common.getServerPath() + 'controller/action',
            mtype: 'POST',
            jsonReader: common.jqgrid.jsonReader('Id'),
            colModel: [
            { name: 'MethodCode', label: 'MethodCode', index: 'MethodCode', hidden: true },
            { name: 'PriceCode', label: 'Price Code', index: 'PriceCode', width: '20px' },
            { name: 'Description', label: 'Description', index: 'Description', width: '34px' },
            { name: 'RoundTo', label: 'RoundTo', index: 'RoundTo', width: '10px' },
            {
                name: 'MinPrice',
                label: 'Min Pr',
                index: 'MinPrice',
                width: '15px',
                align: 'right',               
                formatter: customCurFormatter,
                editable: true,
                editrules: {
                    number: true,
                    minValue: 0,
                    custom: true,
                    custom_func: validateMinPrice
                }
            }
                ],
                caption: 'Price Entity List',
                hidegrid: false,
                ignoreCase: true,
                viewrecords: true,
                recordtext: '{2} Entity(ies).',
                autowidth: true,
                shrinkToFit: true,
                scroll: 1,
                sortname: 'PriceCode',
                sortorder: 'asc',
                rowNum: 500,
                altRows: true,
                altclass: 'gridAltRowClass',
                pager: '#pagerEntityPriceListDetails',
                onCellSelect: priceItemSelect,
                onSelectRow: onSelectPrice,
                afterSubmitCell: function (rowid) {
                    this.setRowData(rowid, info.Data, null);
                },
                loadComplete: priceListEntityLoadComplete,
                loadError: function (xhr, status, error) {
                    common.ajax.alsJsonError(xhr, status, error);
                    //stopDataLoading();
                }//,
                //loadBeforeSend: function () { isDataLoadingCount++; },
                //beforeSelectRow: function () { return !getIsDataLoading(); }
            })

这是格式化程序

var customCurFormatter = function (cellvalue, options, rowObject) {       
    return cellvalue.toFixed(rowObject.RoundTo);
}

使用它时，与 formatter:currency 不同，当转到下一行时，单元格会卡在编辑模式。

任何想法都将不胜感激。

【问题讨论】：

请在关于jqGrid的所有问题中包含您使用（可以使用）的jqGrid的版本和fork的信息b> 的 jqGrid（free jqGrid，商业 Guriddo jqGrid JS 或版本 jsonReader。
独立于jqGrid的版本可以看出一个问题。 customCurFormatter 的代码假设cellvalue 是Number，但也可能是String。我不建议使用scroll: 1，这样会带来更多的问题。推荐使用rowNum，行数可以在屏幕上显示（大约15-25）。再说一句：width like width: '15px' 是错误的。该值应该是像width: 15 这样的数字。
奇怪的是url: common.getServerPath() + 'controller/action', mtype: 'POST'和datatype: 'local'一起使用。你想如何加载数据？如果您之前加载过数据，那么您应该使用data 参数来创建填充数据的网格。
Oleg, Jqgrid 是 4.4.4 免费版。
您只需打开jquery.jqgrid.min.js 即可查看您当前使用的jqGrid 版本。它在网格开头的评论中。如果您定义自定义格式化程序并想要使用编辑，那么您必须定义 unformatter：unformat 回调（请参阅here）。此外，自定义格式化程序的当前代码还不清楚。格式化程序的目标是生成单元格的 HTML 片段 (<td>)。 unformatter 的目标：从单元格中返回值（来自<td>）。 unformat 回调用于编辑。

标签： jqgrid formatting editmode editmodel

【解决方案1】：

自定义格式化程序的当前代码错误，因为toFixed 方法可以应用于Number 而不是字符串。 cellvalue 至少在编辑期间具有 String 类型。格式化程序代码的最小更改应该是

var customCurFormatter = function (cellvalue, options, rowObject) {       
    return Number(cellvalue).toFixed(rowObject.RoundTo);
}

您的代码还有许多其他问题。例如，强烈建议将 always unformat 回调与 formatter 一起定义。

【讨论】：

谢谢！那么在这种情况下，unfromat 会是什么？
@sarsnake：您应该添加简单的unformat 并查看它会被调用并查看它何时会被调用。可能在某些情况下，默认的 unformatter 也可以，但我建议在添加自定义格式化程序时添加您自己的自定义 unformatter。