0

我使用一个简单的 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 });
4

1 回答 1

0

我在您的代码中看到了许多小问题。我建议您datatype:'json'与 with 一起使用，loadonce: true而不是datatype:'jsonstring'. 如果您有数百行，那么根据我的经验，所有数据的加载都足够快。因此，您可以从服务器返回所有行。jqGrid 将显示前 50 行（因为您使用rowNum:50），并且用户可以使用通常非常快的本地数据分页。

如果您在datatype:'json'直接使用和加载数据时遇到问题，那么您应该在您的问题中附加来自服务器的准确响应。我个人使用Fiddler来跟踪客户端和服务器之间的 HTTP 流量。您将在此处找到准确的 JSON 数据。初学者的典型错误是将数据（对象）额外手动转换为 JSON 字符串。在这种情况下，JSON 字符串将被.NET 框架第二次转换为 JSON。在这种情况下，请参阅服务器响应 ( \") 中的转义引号。可能您还有另一个问题，但要对其进行本地化，需要查看服务器响应。

如果您需要将其他数据发布到服务器depositNumber、action、等fromDate，toDate您可以使用postData哪些属性被定义为函数（请参阅答案）以获取更多详细信息。

于 2013-10-11T15:01:40.703 回答