我正在使用AngularJS ng-grid，其中将与onRegisterApi关联的$ scope.gridOptions分配给下面的代码中列出的功能：
onRegisterApi: function (gridApi) {
alert("in");
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
alert("in");
var msg = 'row selected ' + row.isSelected;
$log.log(msg);
console.log(msg);
//$window.alert(msg);
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function (rows) {
alert("in");
var msg = 'rows changed ' + rows.length;
$log.log(msg);
// $window.alert(msg);
console.log(msg);
});
//Added for custom paging
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
$scope.pageSize = pageSize;
$scope.currentPage = newPage;
$scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
$scope.loadData();
});
//custom sort
$scope.gridApi.core.on.sortChanged($scope, function (grid, sortColumns) {
if (sortColumns.length == 0) {
sortingOptions = null;
} else {
sortingOptions = sortColumns[0].sort.direction;
}
$scope.loadData();
});
}
但是，当触发gridApi.selection.on.rowSelectionChanged / gridApi.pagination.on.paginationChanged / $ scope.gridApi.core.on.sortChanged通过单击行，更改分页选项之一（例如页面大小），然后单击图像ng-grid.PNG中列出的排序图标，上述方法未调用，请告知。
注意：我将useExternalPagination / useExternalSorting / useExternalFiltering设置为“ true”，并启用了“ enableRowSelection：true”。
请告知！！！
问题在于ng-grid和ui-grid的混合。尝试使用任何一种框架，我建议ui-grid与ng-grid比较。
因为在HTML中，使用了ng-grid，所以不会触发onRegisterApi，因为它与ui-grid相关。
因此，使用ui-grid已解决RegisterApi调用问题。
和附带的角度版本不兼容，因此我更改了分页和选择的导入方式，并很少使用ui-grid选项。
这里是更新的演示-http://plnkr.co/edit/1oUIj7IprYoCpYJ6u5OF?p=preview
请检查此文档-http://ui-grid.info/docs/#!/api/ui.grid.pagination.directive:uiGridPagination。
<!doctype html>
<html ng-app="erpApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/i18n/ui-grid.grouping.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div ng-controller="AccountsController">
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-pagination>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
var app;
app = angular.module('erpApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection']);
app.controller('AccountsController', [
'$scope',
//'$filter',
//'$window',
//'$http',
//'$log',
function ($scope){//, $filter, $window, $http, $log) {
init();
function init() {
//Pagination varibles
var paginationOptions = {
paginationPageSizes: [5, 10, 20, 30, 40, 50],
pageNumber: 1,
paginationPageSize: 10,
};
var sortingOptions = {
columnName: 'ActID',
isAscending: true,
};
$scope.currentPage = 1;
$scope.pageSize = paginationOptions.pageSize;
//end here
$scope.loadData = function() {
$scope.items = [
{
ActID: '1',
Name: '1',
NameE: '1',
},
{
ActID: '2',
Name: '2',
NameE: '2',
},
{
ActID: '3',
Name: '3',
NameE: '3',
},
{
ActID: '4',
Name: '4',
NameE: '4',
},
{
ActID: '5',
Name: '5',
NameE: '5',
},
{
ActID: '6',
Name: '6',
NameE: '6',
},
{
ActID: '7',
Name: '7',
NameE: '7',
},
{
ActID: '8',
Name: '8',
NameE: '8',
},
{
ActID: '9',
Name: '9',
NameE: '9',
},
{
ActID: '10',
Name: '10',
NameE: '10',
},
{
ActID: '11',
Name: '11',
NameE: '11',
},
{
ActID: '12',
Name: '12',
NameE: '12',
},
{
ActID: '13',
Name: '13',
NameE: '13',
},
{
ActID: '14',
Name: '14',
NameE: '14',
},
{
ActID: '15',
Name: '15',
NameE: '15',
},
{
ActID: '16',
Name: '16',
NameE: '16',
},
{
ActID: '17',
Name: '17',
NameE: '17',
},
{
ActID: '18',
Name: '18',
NameE: '18',
},
{
ActID: '19',
Name: '19',
NameE: '19',
},
{
ActID: '20',
Name: '20',
NameE: '20',
},
];
};
var columns = [];
columns = getHeaderColumns();
$scope.loadData();
$scope.gridOptions = {
data: 'items',
enableColumnResizing: true,
enableRowReordering: true,
enablePaging: true,
enableFiltering: true,
treeRowHeaderAlwaysVisible: false,
showFooter: true,
showFilter: false,
showGroupPanel: true,
showColumnFooter: true,
displaySelectionCheckbox: false,
showTableBorder: true,
enableRowSelection: true,
selectionRowHeaderWidth: 35,
enableRowHeaderSelection: false,
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
useExternalPagination: true, // custom
useExternalSorting: true, // custom
useExternalFiltering: true, // custom
enableSorting: true,
columnDefs: [{
field: 'ActID',
type: 'string',
displayName: 'ActID',
},{
field: 'Name',
type: 'string',
displayName: 'Name',
},{
field: 'NameE',
type: 'string',
displayName: 'NameE',
}],
//This code used for export grid data in csv file
enableGridMenu: true,
enableSelectAll: true,
exporterMenuPdf: true,
enableColumnMenus: true,
onRegisterApi: function(gridApi) {
alert("in onRegisterApi");
$scope.gridApi = gridApi;//debugger;
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
alert("in rowSelectionChanged");
var msg = 'row selected ' + row.isSelected;
//$log.log(msg);
console.log(msg);
//$window.alert(msg);
});
gridApi.selection.on.rowSelectionChangedBatch($scope, function(rows) {
alert("in rowSelectionChangedBatch");
var msg = 'rows changed ' + rows.length;
//$log.log(msg);
// $window.alert(msg);
console.log(msg);
});
//Added for custom paging
gridApi.pagination.on.paginationChanged($scope, function(
newPage,
pageSize
) {
alert("in paginationChanged");
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
$scope.pageSize = pageSize;
$scope.currentPage = newPage;
$scope.totalPage = Math.ceil(
$scope.gridOptions.totalItems / $scope.pageSize
);
$scope.loadData();
});
//custom sort
gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
alert("in sortChanged");
if (sortColumns.length === 0) {
sortingOptions = null;
} else {
sortingOptions = sortColumns[0].sort.direction;
}
$scope.loadData();
});
},
};
}
$scope.RefreshGridData = function() {
$scope.loadData();
};
$scope.ungroupData = function() {
$scope.gridApi.grouping.clearGrouping();
};
}
]
);
function getHeaderColumns() {
var columns = [];
columns.push({
field: 'ActID',
type: 'string',
displayName: 'ActID',
});
columns.push({
field: 'Name',
type: 'string',
displayName: 'Name',
});
columns.push({
field: 'NameE',
type: 'string',
displayName: 'NameE',
});
return columns;
}
希望这会有所帮助。