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

列调整大小对我来说很有用。我必须添加＆＃39; ui.grid.resizeColumns＆＃39; 作为依赖项：

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

Answer 3

我无法代表早期版本，但在ui-grid 3.1.1版中，将ui.grid.resizeColumns依赖项添加到模块并在gridOptions中设置enableColumnResizing = true就足够了。没有必要将ui-grid-resize-columns属性添加到div标记。

Answer 4

我认为在v3.0.0-rc.12中添加了分页，但我对此并不确定。只需在源文件中搜索分页。

对于处理分页，请参阅以下答案：

Angular ui-grid tables, client side pagination and scrolling

ui-grid-Tutorial还有一个例子：

http://ui-grid.info/docs/#/tutorial/214_pagination

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

4 个答案: