Question

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

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

}

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

当“退休”按钮单击完成时，状态显示应变为“已退役”，按钮文本应为“激活”。这很好。
当“激活”按钮单击完成时，状态显示应变为“活动”，按钮文本应为“退出”。状态列不会更新。

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

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代码，其中ind被分配here）。 rowObject.IsActive将为undefined，ActiveStatusText的格式化程序将始终返回'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('getLocalRow', rowid).IsActive = isToActive;之后的电话$("#list").jqGrid('setCell', rowid, 'IsActive', isToActive);绝对不需要。

与rowObject

1 个答案: