如何在 angularjs 中使用 ui-grid 为多个表动态创建网格选项

How can I dynamically create grid options for multiple tables using ui-grid in angularjs

本文关键字：动态 创建 选项 网格 ui-grid angularjs      更新时间：2023-09-26

我已经为 ui-grid 表编写了一个服务。现在我只能在一个页面中使用它，但是我想在具有不同表数据的多个页面中使用此服务。如何为多个表传递网格选项和 json 数据。我该怎么做？请帮助任何人。

服务：

(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();  }]);})();

查看页面：

<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>

相关文章：