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