Question

我使用How to update value of data in jqgrid中提到的解决方案在本地更新数据。它对我有用，如第一小提琴所示。在＆＃34;行动＆＃34;列，根据＆＃34; IsActive＆＃34;中的数据有条件地添加按钮。柱。如果它是＆＃34;是＆＃34;，＆＃34;退休＆＃34;按钮被添加为动作。如果是假，＆＃34;激活＆＃34;按钮被添加。调用javascript函数时，按钮变为＆＃34;激活＆＃34;。

Fiddle 1

现在，我添加了另一列，将状态值显示为文本。现在，两个＆＃34;状态＆＃34;专栏和＆＃34;行动＆＃34;列使用相同的数据列 - IsActive。添加此列后，javascript函数不会更改＆＃34;退休＆＃34;到＆＃34;激活＆＃34;。

Fiddle 2

解决此问题的最佳方法是什么？

CODE

$(document).ready(function () {

function updateActiveStatus(rowid, isToActive) {

alert('function');

                        // first change the cell in the visible part of grid
                        $("#list").jqGrid('setCell', rowid, 'firstname', 'A');

                        // now change the internal local data
                        $("#list").jqGrid('getLocalRow', rowid).firstname = 'A';


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



            }


            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": true }
                ],

                myGrid = $("#list");

            myGrid.jqGrid({
                datatype:'local',
                data: myData,
                colNames: ['ID', 'FirstName', 'Code', 'Amount', 'Note', 'Action'],
                colModel:[
                    {name:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'firstname',width:80, align:'center'},
                    { name: 'codeval',  width: 70 },
                    {name:'amount',width:100, formatter:'number'},
                    {name:'note',index:'note',width:100,sortable:false},
                     {
                        name: 'IsActive',
                        width: 100,
                        formatter: function (cellvalue, options, rowObject)                                                 {
                            if (cellvalue == true) {
                                return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-retire" >' +
                                        '<span title="" class="ui-button-icon-primary ui-icon ui-icon-scissors"></span>Retire' +
                                        '</button></div>';
                            }
                            else {
                                return '<div style="padding-left:5px;"><button class="ui-button ui-widget ui-state-default app-custom-button-activate" >' +
                                        '<span title="" class="ui-button-icon-primary ui-icon ui-icon-check"></span>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("getLocalRow", rowid),
                        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;
                }
            });
            myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

        });

Answer 1

我的代码中似乎存在多重误解。首先，您有一些源数据，它们是项目数组。每个项目都是具有多个属性的对象，例如：

{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323",
  "amount": "56", "IsActive": true }

或者，它是相同的，

{ id: "75", firstname: "LORA", codeval: "H", note: "rr7323",
  amount: "56", IsActive: true }

应该清楚的是，此类商品不能具有具有相同名称的多个属性。对象

{ "id": "75", "firstname": "LORA", "codeval": "H", "note": "rr7323",
  "amount": "56", "IsActive": true, "IsActive": true }

即使某些网络浏览器可以忽略该错误，

也会出错。即使您为＆＃34; IsActive＆＃34;指定了相同的值true属性。

以同样的方式，您可以将colModel与多个具有相同name属性的列一起使用。您的第二个演示https://jsfiddle.net/LijoCheeran/rqab1veh/11/包含具有相同属性name: 'IsActive'的两列。这是错的。您可以按使用情况修复代码，例如，第二列中的name: 'IsActive1'。 IsActive1的格式化程序可以使用rowObject.IsActive代替cellvalue来访问所需的数据。相应的代码将是以下

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

其中retireButton和activeButton包含按钮的HTML片段。

现在了解jqGrid持有data数组非常重要。方法$("#list").jqGrid('getLocalRow', rowid)为您提供引用到与行数据相对应的数据项。方法getRowData将从单元格的HTML表示（来自<td>元素）获取数据并在那里取消格式化。返回对象的字段类型为字符串。

因为您不仅需要更新数据，还需要更新firstname，IsActive1和IsActive列的单元格内容，因此您必须在每个字段上调用setCell或者更好地呼叫一个setRowData：

function updateActiveStatus (rowid, isToActive) {
    alert('calling the function');
    $("#list").jqGrid('setRowData', rowid, {
        firstname: 'A',
        IsActive1: false,
        IsActive: false
    });
    var item = $("#list").jqGrid('getLocalRow', rowid);
    // delete unneeded IsActive1 property created in the item
    delete item.IsActive1;
}

setRowData调用的唯一小缺点是在数据项中创建新属性IsActive1。旧的jqGrid 4.6无法保存数据＆＃34;虚拟＆＃34;在另一个地方item.IsActive1。免费的jqGrid允许指定saveLocally回调，这可以使自定义＆＃34;保存＆＃34;本地项目中列的数据。在您的情况下，这不是真正的大问题，您只需要通过delete item.IsActive1删除不需要的属性

您可以在修改过的演示https://jsfiddle.net/OlegKi/rqab1veh/12/

上看到结果

当两列使用相同的字段时，更新jqGrid中的值不起作用

1 个答案: