web-dev-qa-db-ja.com

ui-gridv3.0.0-rc.11でページングとcolumnResizingが機能していませんか

新しい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に似ていると仮定しますが、現時点で本当に必要な列のサイズ変更です。

よろしく

私

angularjsng-gridangular-ui-grid
13
smackenzie

このリンクのおかげで、列のサイズ変更に適しています

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;

そして、列のサイズ変更は現在機能しています。

次にページングに移ります。

よろしく

私

17
smackenzie

列のサイズ変更は私にとってうまく機能しています。依存関係として '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>

そして最後に、コントローラーでenableColumnResizingをtrueにgridOptions：

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

それが最終的にあなたのために働くことを願っています。

追加情報： angular-ui-grid列のサイズ変更

15
tebanep

以前のバージョンについて話すことはできませんが、ui-gridバージョン3.1.1では、モジュールにui.grid.resizeColumns依存関係を追加し、gridOptionsでenableColumnResizing = trueを設定するだけで十分です。 ui-grid-resize-columns属性をdivタグに追加する必要はありません。

2
Kirby

V3.0.0-rc.12でページネーションが追加されたと思いますが、それについてはよくわかりません。ソースファイルでページ付けを検索するだけです。

ページネーションの処理については、次の回答を参照してください。

Angular ui-gridテーブル、クライアント側のページ付けとスクロール

Ui-grid-Tutorialにも例があります。

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

0
nabinca