私は単純な jqgrid を使用し、一番下までスクロールするとオンデマンドでデータをロードします。ポイントは、以前にロードされたデータ (ロードされたページ) を保持し、スクロール (新しいページ) に新しいデータをロードすることです。下にスクロールしたときに以前のデータを保持する方法がわかりません。それ？
$Grid.jqGrid({
type:'POST',
datatype:'jsonstring',
datastr:data,
// url:data,
// datatype: 'json',
jsonReader:{
repeatitems:false,
root:"result",
total:function (obj) {
return obj.total;
},
records:"total"
},
direction:"rtl",
sortable:true,
colNames:[Dictionary.Statement().serial , Dictionary.Statement().date, Dictionary.Statement().time, Dictionary.Statement().credit, Dictionary.Statement().debit, Dictionary.Statement().balance, Dictionary.Statement().details, Dictionary.Statement().description, '', '', '', '', ''],
colModel:[
{ label:'serial', name:'serial', index:'serial', search:true, width:100, align:'center' },
{ label:'date', name:'date', index:'date', width:50, editable:true, jsonmap:"shamsiDate.date", align:'center' },
{ label:'time', name:'time', index:'time', width:50, editable:true, jsonmap:"shamsiDate.time", align:'center' },
{ label:'credit', name:'credit', index:'credit', width:150, align:'center', editable:true },
{ label:'debit', name:'debit', index:'debit', width:50, align:'right', editable:true },
{ label:'balance', name:'balance', width:50, search:true, align:"right", editable:true },
{ label:'details', name:'details', width:50, fixed:true, sortable:false, resize:false, align:"center", formatter:jqgridSetting.ShowRowDetailsCol },
{ label:'description', name:'description', index:'description', sortable:false, hidden:true, hidedlg:true },
{ label:'branchCode', name:'branchCode', hidden:true, hidedlg:true },
{ label:'branchName', name:'branchName', hidden:true, hidedlg:true },
{ label:'registrationNumber', name:'registrationNumber', hidden:true, hidedlg:true },
{ label:'agentBranchCode', name:'agentBranchCode', hidden:true, hidedlg:true },
{ label:'agentBranchName', name:'agentBranchName', hidden:true, hidedlg:true }
],
rowNum:50,
pager:'#StatementPager',
sortname:'date',
viewrecords:true,
sortorder:"desc",
caption:"صورت حساب",
gridview:true,
rownumbers:true,
shrinkToFit:true,
autowidth:true,
loadComplete:function () {
jqgridSetting.SetRowStyle();
},
subGrid:true,
subGridRowExpanded:function (subgrid_id, row_id) {
addRowData = $Grid.jqGrid('getRowData', row_id);
var html = '<span style=" direction: rtl;float: right;margin-right:10px">' + addRowData.description + '</span>';
$("#" + subgrid_id).append(html);
jqgridSetting.EditSubgrid();
},
gridComplete:function () {
var subGridHeader = $('.StatementGridWrapper').find('#StatementGrid_subgrid').children(':first');
if ($('span.ui-icon-plus', '#jqgh_StatementGrid_subgrid').length == 0) {
subGridHeader.append('<span class="ui-icon ui-icon-plus"></span>').css('margin', '-1px 2px 0px 0px');
$(subGridHeader.children('span.ui-icon-plus')[0]).click(function () {
jqgridSetting.ShowMoreInfo()
});
}
jqgridSetting.SetGridHeaderStyle('#StatementGrid_rn');
$('.ui-jqgrid-bdiv','#gview_StatementGrid').on('scroll', function (e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
alert('scrolltobottom');
var totalRow = $Grid.jqGrid('getGridParam', 'reccount');
var formData = {
'offset':totalRow == 0 ? 0 : totalRow - 1,
'length':50,
'depositNumber':$("#depositNumber").val(),
'action ':$("#action").val(),
'fromDate':$("#fromDate").val(),
'toDate':$("#toDate").val(),
'fromTime':$("#toTime").val(),
'toTime':$("#fromTime").val()
}
jqgridSetting.PostFormData("/statement/search", formData, 'Statement.SetupStatementGrid', true);
}
});
}
});
$Grid.jqGrid('navGrid', '#StatementPager', { edit:false, add:false, del:false, search:false });