与 rowObject 一起使用时，Formatter 只工作一次

Question

我有以下 jqGrid。 'ActiveStatusText' 列使用格式化程序使用 rowObject 的 IsActive 列值填充。

{
    name: 'ActiveStatusText',
    width: 100,
    formatter: function (cellvalue, options, rowObject) {
             return rowObject.IsActive == true ? 'Active' : 'Retired';
    }

}

点击按钮时，需要更新状态显示文本（“'ActiveStatusText'”）。

当“退休”按钮点击完成时，状态显示应该变成“退休”，按钮文本应该是“激活”。这很好用。
当“Activate”按钮点击完成后，状态显示应变为“Active”，按钮文本应为“Retire”。状态栏未更新。

为什么文本更改只发生在第一次？如何解决这个问题？

Fiddle

$(document).ready(function () {

    function updateActiveStatus(rowid, isToActive) {

        alert(isToActive);

        $("#list").jqGrid('setCell', rowid, 'IsActive', isToActive);
        $("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive;

        //Set display text
        $("#list").jqGrid('setCell', rowid, 'ActiveStatusText', isToActive);
    }


    var myData = [

        { "id": "35", "firstname": null, "codeval": "G", "note": "xx7866", "amount": "23", "IsActive": true },
        { "id": "73", "firstname": null, "codeval": "W", "note": "dd1047", "amount": "34", "IsActive": true },
        { "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323", "amount": "56", "IsActive": true },
        { "id": "95", "firstname": "EST", "codeval": "M", "note": "gg574", "amount": "55", "IsActive": false }
        ],

        myGrid = $("#list");

    myGrid.jqGrid({
        datatype:'local',
        data: myData,
        colNames: ['ID', 'Note','Status', 'Action'],
        colModel:[
            {name:'id',width:70,align:'center',sorttype: 'int'},
            {name:'note',index:'note',width:100,sortable:false},
             {
                name: 'ActiveStatusText',
                width: 100,
                formatter: function (cellvalue, options, rowObject) {
                    return rowObject.IsActive == true ? 'Active' : 'Retired';
                }
            },
            {
                name: 'IsActive',
                width: 100,
                formatter: function (cellvalue, options, rowObject)                                                 {
                    if (cellvalue == true) {
                        return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
                           'Retire' +'</button></div>';
                    }
                    else {
                        return '<div><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
                                'Activate' +
                                '</button></div>';
                    }
                }
            }
        ],
        rowNum:10,
        pager: '#pager',
        gridview:true,
        ignoreCase:true,
        rownumbers:true,
        viewrecords: true,
        sortorder: 'desc',
        height: '100%',
        beforeSelectRow: function (rowid, e) {
            var $self = $(this),
                $td = $(e.target).closest("tr.jqgrow>td"),
                rowid = $td.parent().attr("id"),
                rowData = $self.jqGrid("getRowData", rowid),
                iCol = $td.length > 0 ? $td[0].cellIndex : -1,
                colModel = $self.jqGrid("getGridParam", "colModel");

            celValue = $self.jqGrid('getCell', rowid, 'FirstName');

            if (iCol >= 0 && colModel[iCol].name === "IsActive") {

                if ($(e.target).hasClass("app-custom-button-retire")) {
                    updateActiveStatus(rowid,false);
                    return false;
                }

                if ($(e.target).hasClass("app-custom-button-activate")) {

                    updateActiveStatus(rowid, true);
                    return false;
                }
            }


            //Avoid selection of row
            return false;
        }
    });


});

HTML

<body>
    <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>
</body>

Answer 1

我在你上一个问题的答案中写到，jqGrid 4.6 已经很旧了（3 岁），它包含很多错误，稍后会修复。我建议您将 jqGrid 升级到最新版本的免费 jqGrid（今天是 4.13.6）。您的代码将开始工作。

您可以通过任何方式轻松验证格式化程序是否会被 setCell 调用，但使用错误的参数 rowObject。 jqGrid 4.6 使用 <tr> 的 DOM 元素而不是真正的 rowObject（参见 the line of code, where ind is assigned here）。 rowObject.IsActive 将是 undefined 并且 ActiveStatusText 的格式化程序将 return 总是 'Retired'.

只有当您确实无法迁移到免费的 jqGrid 时，您才可以使用以下解决方法：

{
    name: 'ActiveStatusText',
    width: 100,
    formatter: function (cellvalue, options, rowObject) {
        var isActive = rowObject.IsActive;
        if (isActive === undefined) {
            // be called by setCell from buggy version of jqGrid
            isActive = $(this).jqGrid('getLocalRow', options.rowId).IsActive;
        }

        return isActive == true ? 'Active' : 'Retired';
    }
}

查看修改后的演示https://jsfiddle.net/OlegKi/fp7mL659/2/，其中使用了代码。顺便说一句，我在您之前的回答中给您写了回答，setCell 也会更改本地数据。因此 $("#list").jqGrid('setCell', rowid, 'IsActive', isToActive); 之后的调用 $("#list").jqGrid('getLocalRow', rowid).IsActive = isToActive; 是绝对不需要的。

与 rowObject 一起使用时，Formatter 只工作一次

Formatter works only once when used with rowObject

jqgrid