13

我似乎无法在新的 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，但它的列大小调整是我目前真正需要的。

问候

一世

4

4 回答 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;

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

现在开始分页。

问候

一世

于 2014-10-03T16:26:22.863 回答
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 column resizing

于 2014-10-14T14:12:26.977 回答
2

我不能说早期版本，但在 ui-grid 版本 3.1.1 中，将 ui.grid.resizeColumns 依赖项添加到您的模块并在 gridOptions 中设置 enableColumnResizing = true 就足够了。不需要将 ui-grid-resize-columns 属性添加到 div 标签。

于 2016-03-18T22:28:09.540 回答
0

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

要处理分页，请参阅此答案：

Angular ui-grid 表格、客户端分页和滚动

ui-grid-Tutorial 中也有一个例子：

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

于 2014-11-11T12:31:03.793 回答