AngularJS onRegisterApi 中的 ng-grid 方法 "gridApi.pagination.on.paginationChanged" 未被调用
AngularJS ng-grid's method "gridApi.pagination.on.paginationChanged" within onRegisterApi not being called
我正在使用 AngularJS ng-grid,其中为 $scope.gridOptions 关联的 onRegisterApi 分配我下面代码中列出的函数:
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 调用问题。
和 angular 包含的版本不兼容,所以我更改了导入和一些 ui-分页和选择的网格选项。
这是更新后的演示 - 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;
}
希望对您有所帮助。
我正在使用 AngularJS ng-grid,其中为 $scope.gridOptions 关联的 onRegisterApi 分配我下面代码中列出的函数:
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 调用问题。
和 angular 包含的版本不兼容,所以我更改了导入和一些 ui-分页和选择的网格选项。
这是更新后的演示 - 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;
}
希望对您有所帮助。