分页和columnResizing不工作在ui网格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/

显然你必须添加 '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并网调整柱类：

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

最后在你的控制器设置enableColumnResizing到真正在gridOptions：

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

希望它终于适合你。

额外的信息在：angular-ui-grid column resizing

Answer 3

我认为分页是在V3.0.0-rc.12加入，但我不知道这一点。只需在源文件中搜索分页。

为了处理分页看到这样的回答：

Angular ui-grid tables, client side pagination and scrolling

还有在UI并网教程的例子：

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

Answer 4

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