分页和columnResizing在ui-grid v3.0.0-rc.11中不起作用

Question

我似乎无法在新的ngGrid(ui-Grid)rc build v3.0.0-rc.11中使用任何分页或列重新调整大小.根据这个例子,它应该是非常直接的:http: //ui-grid.info/docs/#/tutorial/401_AllFeatures

对于我的主要div,如果我这样做:

<div ui-grid="productGridOptions"  ui-grid-resize-columns class="uiGridProducts">

并在我的控制器中执行此操作:

$scope.productGridOptions={};       


         $scope.productGridOptions.enableColumnResizing = true;
         $scope.productGridOptions.enableFiltering = false;
         $scope.productGridOptions.enablePaging = true;

         $scope.productGridOptions.pagingOptions = {
                    pageSizes: [250, 500, 1000],
                    pageSize: 250,
                    currentPage: 1
         };


         $scope.productGridOptions.rowIdentity = function(row) {
            return row.id;
          };

         $scope.productGridOptions.getRowIdentity = function(row) {
            return row.id;
         };

         $scope.productGridOptions.data = 'products';

        //The options for the data table    
        $scope.productGridOptions.columnDefs = [
                  { name:'ID', field: 'id' },
                  { name:'Product', field: 'productName' },
                  { name:'Active Ing.', field: 'activeIngredients'},
                  { name:'Comments', field: 'comments' }
                ];

        prProductService.getProducts().then(function(products) {
            $scope.products = products;



        });

分页或列调整大小都不起作用.在ui-grid教程中没有分页示例,因此假设它类似于ngGrid,但它的列调整大小我目前真正需要.

问候

一世

Answer 1

对于列调整大小,感谢此链接

http://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

显然你必须在你的app模块中添加'ui.grid.resizeColumns'作为依赖项,并且只需在div中使用ui-grid-resize-columns标签(正如我所做的那样)......

我删除了代码

 $scope.productGridOptions.enableColumnResizing = true;

列调整大小现在正在工作....

现在进行分页.

问候

一世

Answer 2

列调整大小对我来说很有用.我必须添加'ui.grid.resizeColumns'作为依赖:

angular.module('app', ['ngRoute', 'ngResource', 'ui.bootstrap', 'ui.grid', 'ui.grid.resizeColumns'])

然后在你的html中添加ui-grid-resize-columns类:

<div class="grid" ui-grid="gridOptions" ui-grid-resize-columns></div>

最后在您的控制器中,您在gridOptions中将enableColumnResizing设置为true:

$scope.gridOptions = {
    data: 'data.data',
    enableSorting: true,
    enableColumnResizing: true
}

希望它最终适合你.

额外信息:angular-ui-grid列调整大小