Jquery 检索新页面数据jqgrid时本地加载了PAG

Jquery 检索新页面数据jqgrid时本地加载了PAG,jquery,jqgrid,scroll,lazy-loading,Jquery,Jqgrid,Scroll,Lazy Loading,我使用一个简单的jqgrid,当滚动到底部时,我会按需加载数据。 重点是我想保留以前加载的数据(加载的页面)并在滚动(新页面)上加载新数据我不知道如何在滚动到底时保留以前的数据旧数据被替换为新数据我如何解决 $Grid.jqGrid({ type:'POST', datatype:'jsonstring', datastr:data, // url:data, // datatype: 'json',

我使用一个简单的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 });
$Grid.jqGrid({
类型:'POST',
数据类型:'jsonstring',
datastr:data,
//url:数据,
//数据类型:“json”,
jsonReader:{
重复项:false,
根:“结果”,
总计:功能(obj){
返回obj.total;
},
记录:“总数”
},
方向:“rtl”,
可排序:是的,
colNames:[字典.语句().序列,字典.语句().日期,字典.语句().时间,字典.语句().贷方,字典.语句().借方,字典.语句().余额,字典.语句().详细信息,字典.语句().说明,
colModel:[
{标签:'serial',名称:'serial',索引:'serial',搜索:true,宽度:100,对齐:'center'},
{标签:'date',名称:'date',索引:'date',宽度:50,可编辑:true,jsonmap:'shamsiDate.date',对齐:'center'},
{标签:'time',名称:'time',索引:'time',宽度:50,可编辑:true,jsonmap:'shamsiDate.time',对齐:'center'},
{标签:'credit',名称:'credit',索引:'credit',宽度:150,对齐:'center',可编辑:true},
{标签:'debit',名称:'debit',索引:'debit',宽度:50,对齐:'right',可编辑:true},
{标签:'balance',名称:'balance',宽度:50,搜索:true,对齐:“right”,可编辑:true},
{label:'details',name:'details',width:50,fixed:true,sortable:false,resize:false,align:center,格式化程序:jqgridSetting.ShowRowDetailsCol},
{label:'description',name:'description',index:'description',sortable:false,hidden:true,hiddedlg:true},
{label:'branchCode',name:'branchCode',hidden:true,hiddedlg:true},
{标签:'branchName',名称:'branchName',隐藏:true,隐藏lg:true},
{标签:'registrationNumber',名称:'registrationNumber',隐藏:true,隐藏lg:true},
{label:'agentBranchCode',name:'agentBranchCode',hidded:true,hiddedLG:true},
{label:'agentBranchName',name:'agentBranchName',hidded:true,hiddedlg:true}
],
rowNum:50,
寻呼机:“#语句寻呼机”,
sortname:“日期”,
viewrecords:是的,
巫师:“描述”,
描述:“您的姓名和地址”,
gridview:没错,
行数:对,
shrinkToFit:是的,
自动宽度:正确,
loadComplete:函数(){
jqgridSetting.SetRowStyle();
},
子网格:对,
subGridRowExpanded:函数(subgrid\u id,row\u id){
addRowData=$Grid.jqGrid('getRowData',行id);
var html=''+addRowData.description+'';
$(“#”+子网格_id).append(html);
jqgridSetting.EditSubgrid();
},
gridComplete:函数(){
var subGridHeader=$('.StatementGridWrapper').find('#StatementGrid_subgrid').children(':first');
if($('span.ui icon plus','jqgh_StatementGrid\u subgrid')。长度==0){
subGridHeader.append(“”).css('margin','-1px2px0px0px');
$(subGridHeader.children('span.ui图标+')[0])。单击(函数(){
jqgridSetting.ShowMoreInfo()
});
}
SetGridHeaderStyle(“#StatementGrid_rn”);
$('.ui jqgrid bdiv','#gview_StatementGrid')。在('scroll',函数(e)上{
var$o=$(e.currentTarget);

如果($o[0].scrollHeight-$o.scrollTop()我发现您的代码中存在许多小问题。我建议您将
数据类型:'json'
loadonce:true
一起使用,而不是
数据类型:'jsonstring'
。根据我的经验,如果您有数百行,那么加载所有数据的速度足够快。因此您可以从服务器返回所有行。jqGrid将显示设置前50行(因为您使用的是
rowNum:50
),用户可以使用通常非常快速的本地数据分页

如果您在使用
数据类型:'json'
和直接加载数据方面有问题,那么您应该在问题后面加上服务器的确切的响应。我个人使用它来跟踪客户端和服务器之间的HTTP通信量。您可以在这里找到确切的json数据。初学者的典型错误是额外的手动c将数据(对象)转换为JSON字符串。在这种情况下,JSON字符串将由.NET framework第二次转换为JSON。在这种情况下,可以在服务器响应(
\“
)中看到转义引号。可能您还有另一个问题,但要将其本地化,需要查看服务器响应


如果您需要将附加数据发布到服务器
depositNumber
action
fromDate
toDate
等,您可以使用
postData
哪些属性定义为函数(请参阅)以了解更多详细信息。

不清楚滚动是什么意思。您是指
$('ui jqgrid bdiv','gview_StatementGrid')。在('scroll',…)
部分代码中?您真的使用了
数据类型:'jsonstring',datastr:data
而不是
数据类型:'json'
?您在服务器端实现了分页吗?jqgrid中可以最大加载多少数据(50、1000、10000或更多)?可能
datatype:'json'
loadonce:true
是您的最佳选择?@Oleg感谢Oleg的回复,首先是的,我使用datatype:'jsonstring',datastr:data不是datatype:'json',因为服务器回复是json,我不知道为什么,但当我使用datatype:'json'时,我指的是数据