[英]How can I dynamically create grid options for multiple tables using ui-grid in angularjs
I have written one service for ui-grid table. 我已经为ui-grid表编写了一项服务。 Now I can use this in only one page but, I want to use this service in multiple pages with different table data.
现在,我只能在一个页面中使用此服务,但是,我想在具有不同表数据的多个页面中使用此服务。 How can I pass grid options and json data for multiple tables.
如何传递多个表的网格选项和json数据。 How can I do it?
我该怎么做? Please help anyone.
请帮助任何人。
Service: 服务:
(function(){
"use strict";
angular.module('nApp').controller('SearchResultsController', ['$scope', '$http', '$timeout', '$interval', 'uiGridConstants', 'uiGridGroupingConstants', function ($scope, $http, $timeout, $interval, uiGridConstants, uiGridGroupingConstants) {
var searchResults = this;
searchResults.loadPOHeaderView = loadPOHeaderView;
//searchResults.loadPOLinesView = loadPOLinesView;
function loadPOHeaderView() {
if(dataFactory.getSelectedPOHeader().length) {
$state.go("^.poheader");
};
}
$scope.gridOptions = {
enableHorizontalScrollbar : uiGridConstants.scrollbars.NEVER,
enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 10,
useExternalPagination: true,
useExternalSorting: true,
enableRowSelection: false,
enableCellSelection: false,
enableFiltering: false,
enableCellEdit: false,
enableColumnResizing: true,
enableColumnMenus: false,
enableGridMenu: false,
showGridFooter: false,
showColumnFooter: false,
fastWatch: true,
enablePaging: true,
showFilter: true,
rowHeight: 45,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
},
columnDefs : [
{ name:'Test1', displayName:'Test1'},
{ name:'Test2', displayName:'Test2'},
{ name:'Test3', displayName:'Test3'},
{ name:'Test4', displayName:'Test4'},
{ name:'Test5', displayName:'Test5'},
{ name:'Test6', displayName:'Test6'},
{ name:'Test7', displayName:'Test7'}
]
};
var paginationOptions = {
pageNumber: 1,
pageSize: 10,
sort: null
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'common/service/pogriddata.json';
break;
case uiGridConstants.DESC:
url = 'common/service/pogriddata.json';
break;
default:
url = 'common/service/pogriddata.json?page='+paginationOptions.pageNumber;
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 30;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
}); }; getPage(); }]);})();
View page: 查看页面:
<div ng-controller="SearchResultsController" class="col-md-12">
<div ui-grid="gridOptions" ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-move-columns ui-grid-importer ui-grid-exporter ui-grid-pagination class="grid"></div>
</div>
app.directive('gridWrapper', ['$http',function ($http) { return { restrict: 'EA', scope:{ enableFilter:'@', enableSorting:'@', enableColResize:'@', ngModel: '=', getHeader: '=', getData: '=', }, template:'<div ag-grid="gridOptions" class="ag-fresh" id="gridView" ></div>', controller:function($scope){ $scope.gridOptions = { columnDefs: $scope.getHeader, rowSelection: 'single', rowData: $scope.getData, enableFilter: $scope.enableFilter, enableSorting: $scope.enableSorting, enableColResize: $scope.enableColResize }; } }; }]);
<grid-Wrapper enable-Filter="{{true}}" enable-Sorting="{{true}}" enable-Col-Resize={{true}} ng-model="model" get-header="gridheader" get-data="rowData" ></grid-Wrapper> <grid-Wrapper enable-Filter="{{false}}" enable-Sorting="{{false}}" enable-Col-Resize={{false}} ng-model="model1" get-header="gridheader1" get-data="rowData1" ></grid-Wrapper>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.