Question

我在我的项目中使用jqGrid。我想更新/刷新特定的列数据而不刷新整个网格。请给我一些想法。

Answer 1

Here is a possible solution. You can use the 'setCell' in jqgrid to set the value for specific cell in a column. See the fiddle here: https://jsfiddle.net/99x50s2s/4/

I hope the above fiddle will give you idea to complete your task.

<table id="sg1"></table>
<div id="psg1"></div>
<br>
<button type="button" id="setcolumnbtn">Update 'amount' Column</button>

jQuery("#sg1").jqGrid({
    datatype: "local",
    gridview: true,
    loadonce: true,
    shrinkToFit: false,
    autoencode: true,
    height: 'auto',
    viewrecords: true,
    sortorder: "desc",
    scrollrows: true,
    loadui: 'disable',
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:60, sorttype:"int"},
        {name:'invdate',index:'invdate', width:90, sorttype:"date"},
        {name:'name',index:'name', width:80},
        {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
        {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},     
        {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    caption: "Test Grid"
});

var mydata = [
        {id:"1",invdate:"2007-10-01",name:"test 1234567890123456789",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
        ];

for(var i=0;i<=mydata.length;i++)
    jQuery("#sg1").jqGrid('addRowData',i+1,mydata[i]);


//button event
$('#setcolumnbtn').on('click', function(){
var newAmount = [111,222];
 var existingRowIds = jQuery("#sg1").jqGrid('getDataIDs');

$.each(existingRowIds, function (j, existingRowId) {
    jQuery("#sg1").jqGrid('setCell', existingRowId, 'amount', newAmount[j]);
});

});

jqGrid更新特定列数据而不刷新整列？

1 个答案: