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

当两列使用同一字段时,更新jqGrid中的值不起作用,jqgrid,Jqgrid,我使用中提到的解决方案在本地更新数据。如第一把小提琴所示,它对我起了作用。在Action列中,根据IsActive列中的数据有条件地添加了一个按钮。如果为真,将添加一个Retire按钮作为操作。如果为false,则添加激活按钮。调用javascript函数时,该按钮将更改为激活 现在,我添加了另一列以文本形式显示状态值。现在,Status列和Action列都使用相同的数据列-IsActive。添加此列后,javascript函数不会将按钮从Retire更改为Activate 解决此问题的最佳方法

我使用中提到的解决方案在本地更新数据。如第一把小提琴所示,它对我起了作用。在Action列中,根据IsActive列中的数据有条件地添加了一个按钮。如果为真,将添加一个Retire按钮作为操作。如果为false,则添加激活按钮。调用javascript函数时,该按钮将更改为激活

现在,我添加了另一列以文本形式显示状态值。现在,Status列和Action列都使用相同的数据列-IsActive。添加此列后,javascript函数不会将按钮从Retire更改为Activate

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

代码


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

{id:75,名字:劳拉,代码:H,注:rr7323, 金额:56,IsActive:true} 或者,这是一样的,

{id:75,名字:劳拉,代码:H,注:rr7323, 金额:56,IsActive:true} 应该清楚的是,这样的项不能有多个同名属性。对象

{id:75,名字:劳拉,代码:H,注:rr7323, 金额:56,IsActive:true,IsActive:true} 即使某些web浏览器可以忽略该错误,也可能是错误的。即使为两个IsActive属性指定相同的值true

同样,不能将colModel与具有相同名称属性的多个列一起使用。您的第二个演示有两个属性名相同的列:“IsActive”。这是错误的。您可以根据用法修复代码,例如,第二列中的名称:“IsActive1”。IsActive1的格式化程序可以使用rowObject.IsActive而不是cellvalue来访问所需的数据。相应的代码如下所示

{ 名称:“IsActive1”, 宽度:75, 格式化程序:函数cellvalue、选项、行对象{ return rowObject.IsActive==true?'Active':'Retired'; } }, { 名称:“IsActive”, 宽度:100, 格式化程序:函数cellvalue、选项、行对象{ 返回cellvalue==true?retireButton:activeButton; } } 其中,按钮和activeButton包含按钮的HTML片段

现在重要的是要理解,jqGrid持有数据数组。方法$list.jqGrid'getLocalRow',rowid获取对应于行数据的数据项的引用。getRowData方法将从元素的单元格的HTML表示中获取数据,并在那里取消格式化。返回对象的字段类型将为字符串

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

函数updateActiveStatus rowid,isToActive{ 警报“调用函数”; $list.jqGrid'setRowData',rowid{ 名字:“A”, I活动1:错误, IsActive:错误 }; var item=$list.jqGrid'getLocalRow',rowid; //删除在项目中创建的不需要的IsActive1属性 删除item.IsActive1; } setRowData调用的唯一一个小缺点是在数据项中创建新属性IsActive1。旧的jqGrid 4.6不可能将数据作为item.IsActive1虚拟地保存在另一个地方。Free jqGrid允许指定SaveLocal回调,它可以在本地项中自定义保存列的数据。在您的情况下,这不是真正的大问题,您只需要通过delete item.IsActive1删除不需要的属性

您可以在修改后的演示上看到结果

$(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" });

        });