logo标签列表

在ui-grid v3.0.0-rc.11中，分页和列宽调整是否无法正常工作？

angularjsng-gridangular-ui-grid
13

在新的ngGrid(ui-Grid) rc版本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，但我目前真正需要的是列调整。

谢谢

i

4个回答
17

关于列大小调整，感谢这篇文章的帮助：

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

显然，您需要将“ui.grid.resizeColumns”作为依赖项添加到您的应用模块中，并在div中使用ui-grid-resize-columns标记（就像我正在做的那样）...

我删除了代码。

 $scope.productGridOptions.enableColumnResizing = true;

现在列的调整大小已经正常了....

现在开始进行分页。

敬礼

i

这解决了我的问题，谢谢。我一直在看http://ui-grid.info/docs/#/api/ui.grid.resizeColumns.directive:uiGridColumnResizer，它建议使用`ui-grid-column-resizer`属性，但你的建议使用`ui-grid-resize-columns`属性对我很有用。 - Kon
15

列宽调整对我来说很有效。我必须将 '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 列调整大小。
2
这与我的答案类似。我很感激。 - smackenzie
2

我无法代表早期版本，但在ui-grid 3.1.1版本中，只需将ui.grid.resizeColumns依赖项添加到您的模块中，并在gridOptions中设置enableColumnResizing = true即可。不需要将ui-grid-resize-columns属性添加到div标记中。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接