为什么使用JqGrid在表中不改变页面？

Posted 2021-04-19

我刚开始使用JqGrid。我有这样的配置，可以正确地将数据加载到表中，当更改页面时页面数量也会发生变化，当我更改我想要显示的数量也有效时，但问题是当我更改页面时，记录在桌子没有变化。我正在使用angularjs和JqGrid以及JADE。数据从服务器加载，所以我不再加载它。这是网格控制器代码的配置：

/*global appModule, JSON */
"use strict";
(appModule.lazy || appModule).service("GridControlesTecnicosSrv", ["$filter", "$translate", "$timeout",
    function($filter, $translate, $timeout) {
        function emptyFormatter(val) {
            if (val === undefined || val === null || val === "" || (angular.isString(val) && val.trim() === "")) {
                return "-";
            } else {
                return $filter("uppercase")(val);
            }
        }

        function getOptions(refrescar, modDCT) {
            return {
                colModel: [{
                    label: $translate("EmisionHogar.ModalControlesTecnicos.Codigo"),
                    name: "codigo",
                    index: "codigo",
                    width: "50",
                    sortable: false,
                    formatter: emptyFormatter
                }, {
                label: $translate("EmisionHogar.ModalControlesTecnicos.Tipo"),
                name: "tipo",
                index: "tipo",
                width: "150",
                sortable: false,
                formatter: emptyFormatter
            }, {
                label: $translate("EmisionHogar.ModalControlesTecnicos.Descripcion"),
                name: "descripcion",
                index: "descripcion",
                width: "300",
                sortable: false,
                formatter: emptyFormatter
            }],
            viewrecords: true,
            rowNum: 5,
            rowList: [5, 10, 15],
            autoencode: true,
            loadonce: true,
            refresh: true,
            datatype: function(postdata) {
                if (modDCT.reloadGrid) {
                    modDCT.reloadGrid = false;
                    var jsonData = {
                        page: modDCT.paginacion.page || 1,
                        total: Math.ceil((modDCT.controlesTecnicos.length || 0) / (modDCT.paginacion.pageSize || 10)) || 1,
                        records: modDCT.controlesTecnicos.length || 0,
                        rows: modDCT.controlesTecnicos || []
                    };
                    angular.element("#gridControlesTecnicos")[0].addJSONData(jsonData);
                }
            },
            autowidth: true,
            scrollerbar: true,
            height: "auto",
            shrinkToFit: false,
            emptyRecords: $translate("ControlesTecnicos.sinResultados"),
            pagerpos: "left",
            pgtext: "<span>{0}/{1}</span>",
            onSortCol: function() {
                $timeout(function() {
                    refrescar();
                });
            },
            onPaging: function() {
                $timeout(function() {
                    refrescar();
                });
            },
            gridComplete: function() {
                var firstPager = angular.element("#first_grid_pager_controlestecnicos")
                if (firstPager && firstPager.length > 0) {
                    angular.element("#first_grid_pager_controlestecnicos").remove();
                    angular.element("#last_grid_pager_controlestecnicos").remove();
                    angular.element("#prev_grid_pager_controlestecnicos").before(angular.element("#next_grid_pager_controlestecnicos"))
                    angular.element(".ui-separator").remove();
                }
            }
        };
    }
    return {
        getOptions: getOptions
    };
}
]);

---

这是控制分页并初始化表的控制器。

/*global appModule */
"use strict";
(appModule.lazy || appModule).controller("DetalleControlesTecnicos", ["$scope", "GridControlesTecnicosSrv", "$modalInstance", "$translate", "datosModal", "$rootScope",
    function($scope, GridControlesTecnicosSrv, $modalInstance, $translate, datosModal, $rootScope) {
        var modDCT = this;
        datosModal = datosModal || {};
        modDCT.controlesTecnicos = datosModal.controlesTecnicos;

        function Cancelar() {
            $modalInstance.dismiss();
        }

        function updateDatosPaginacion(newPag, oldPag) {
            if (angular.isObject(newPag) && angular.isObject(oldPag)) {
                modDCT.paginacion = angular.copy(newPag);
                var grid = angular.element("#gridControlesTecnicos");
                if (newPag.page !== oldPag.page) {
                    grid.setGridParam("page", newPag.page);
                }
                if (newPag.pageSize !== oldPag.pageSize) { 
                    grid.setGridParam("rowNum", newPag.pageSize);
                }
                modDCT.reloadGrid = true;
                angular.element("#gridControlesTecnicos").trigger("reloadGrid");
            }
        }

        function refrescar() {
            var grid = angular.element("#gridControlesTecnicos");
            var rowNum = grid.getGridParam("rowNum");
            var page = grid.getGridParam("page");
            modDCT.paginacion.page = Number(page);
            modDCT.paginacion.pageSize = Number(rowNum);
            modDCT.reloadGrid = true;
            angular.element("#gridControlesTecnicos").trigger("reloadGrid");
        }

        function onInit() {
            modDCT.titulo = $translate("EmisionHogar.ModalControlesTecnicos.Titulo");
            modDCT.buttonCancelar = datosModal.buttonCancelar || $translate("EmisionHogar.ModalControlesTecnicos.ControlesTecnicosButtonCancelar");
            modDCT.close = Cancelar;
            modDCT.paginacion = {
                pageSize: 5,
                page: 1
            };
            modDCT.grid = {
                model: undefined,
                data: [],
                options: GridControlesTecnicosSrv.getOptions(refrescar, modDCT)
            };
            modDCT.reloadGrid = true;
            $scope.$watch("modDCT.paginacion", updateDatosPaginacion, true);
        }
        onInit();
    }
]); 

此图像显示工作表和页码。

是网格选项的问题还是什么？