2015-06-22 54 views
1

我有一个jqgrid,它最初被填充一些记录。用户可以选择向网格添加更多行。但是,在添加新行之后,如果用户尝试对记录进行排序,则结果不一致,并且某些记录在网格中丢失。jqgrid:动态添加记录后排序不起作用

提琴手:https://jsfiddle.net/99x50s2s/68/

HTML:

<table id="sg1"></table> 
<div id="psg1"></div> 
</br> 
<button id="new" type="button">Add New</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:100}, 
     {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 initialData = [ 
     {Id:"1",invdate:"2007-10-01",name:"test 12349",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"} 
     ]; 

var subData = [ 
     {Id:"3",invdate:"2007-10-01",name:"test 12349",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, 
     {Id:"4",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"} 
     ]; 

jQuery("#sg1")[0].addJSONData(initialData); 

var i=2; 

$('#new').on('click', function(){ 
    i = i+i; 
    jQuery("#sg1").jqGrid(
     'addRowData', 
     $.jgrid.randId(), 
     {Id:i,invdate:"2007-10-02",name:"test"+i,note:"note" + i,amount:"300.00",tax:"20.00",total:"320.00"});  
}); 

重现步骤:

一个。 b。启动提琴手(您将看到有2个记录的测试网格) b。现在,点击'添加新'按钮,然后点击任何列标题尝试排序。

问:

这有什么错的代码?为什么有些记录正在消失?

环境: jqGrid的4.6.0,jQuery的1.11.1和IE 9

+1

问题的原因:错误填充**初始**数据。你应该**不使用**'addJSONData'。而不是你可以使用jqGrid的'data'参数:https://jsfiddle.net/OlegKi/99x50s2s/70/ – Oleg

回答

1

你必须使用addRowmethod追加数据。这里是一个更新的小提琴https://jsfiddle.net/99x50s2s/69/

$('#new').on('click', function(){ 
     i = i+i; 
    var parameters = 
{ 
    initdata : {Id:i,invdate:"2007-10-02",name:"test"+i,note:"note" + i,amount:"300.00",tax:"20.00",total:"320.00"}, 
    position :"last" 
}; 
    jQuery("#sg1").jqGrid('addRow',parameters); 
}); 
+0

感谢您向我介绍'addRow'功能。我正在进一步调查这个函数如何适合我在项目中的实际代码。 –

+1

看起来像addRowData删除现有的行,但addRow追加! – prem89

+0

根据文档,它看起来像addRow是addRowData方法的封装。 addRow方法调用addRowData。 –