【问题标题】:Why the pages not changing in the table using JqGrid?为什么使用 JqGrid 的表格中的页面没有改变?
【发布时间】:2019-08-24 01:57:32
【问题描述】:

我刚开始使用 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();
    }
]); 

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

是网格选项有问题还是什么?

【问题讨论】:

  • 像这样混合AngularJS和jQuery是自找麻烦。
  • 我必须,这不是我的选择。

标签: jquery angularjs pagination jqgrid


【解决方案1】:

我变了

modDCT.grid = {
    model: undefined,
    data: [],
    options: GridControlesTecnicosSrv.getOptions(refrescar, modDCT)
};

到

modDCT.grid = {
    model: undefined,
    data: modDCT.controlesTecnicos,
    options: GridControlesTecnicosSrv.getOptions(refrescar, modDCT)
};

我也改变了getOptions方法

datatype: 'jsonstring',

我删除了datastr

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多