web-dev-qa-db-ja.com

ag-gridを使用して列を動的に表示する方法

私はangularjsテクノロジーに不慣れです。ag-gridを使用していて、列を動的に表示したい

私のjsonデータは次のとおりです。

[{Date:'12-12-2015',Name:'ammu',mark:20},{Date:'12-12-2015',Name:'appu',mark:24},{Date:'12-12-2015',Name:'anu',mark:27},{Date:'13-12-2016',Name:'ammu',mark:23},{Date:'13-12-2015',Name:'anu',mark:20}]

私の期待される出力は 期待される出力

既存のコードを以下に示します

$scope.gridOptions = {
    columnDefs: [],
    enableFilter: true,
    rowData: [],
    rowSelection: 'multiple',
    rowDeselection: true
};
 $scope.customColumns = [];
Getdetails();
function Getdetails()
{
    masterdataFactory.Getdetails()
     .success(function (Student) {
        f (Student.length != 0) {
             for(var i=0;i<Student.length;i++) {
                 $scope.customColumns.Push(
                     {
                         headerName: Student[i].Name,
                         field: "Mark",
                         headerClass: 'grid-halign-left'

                     }
                 );
             };
            $scope.gridOptions.columnDefs = $scope.customColumns;
            $scope.gridOptions.rowData = Student;
            $scope.gridOptions.api.setColumnDefs();
          }                 
     })
      .error(function (error) {
          $scope.status = 'Unable to load data: ' + error.message;
      });
}

既存の出力を以下に示します 既存の出力

既存の出力から期待される出力に到達するにはどうすればよいですか

angularjsag-grid
6
Suny Saju

最初にjsonデータを配置します

[{Date:'12-12-2015',ammu:20,appu:24,anu:27},{Date:'13-12-2016' ammu:23,anu:20}]

この目的のために私は次のコードを使用しています

             function generateChartData() {
             var chartData = [],
               categories = {};
             for ( var i = 0; i <Student.length; i++ ) {
                 var newdate = Student[ i ].Date;
                 var Name=Student[ i ].Name;
                 var Mark=Student[ i ].Mark;
                // add new data point
                 if ( categories[ newdate ] === undefined ) {
                     categories[ newdate ] = {
                         DATE: newdate
                     };
                     chartData.Push( categories[ newdate ] );
                 }

                 // add value to existing data point

                 categories[ newdate ][ Name] = Mark;
             }

             return chartData;
         }

グリッドオプションを以下に示します。

 $scope.gridOptions = {
             columnDefs: coldef(),
             enableFilter: true,
             rowData: [],
             rowSelection: 'multiple',
             rowDeselection: true,
             enableColResize: true,

             }
           };
        $scope.gridOptions.columnDefs = $scope.customColumns;
        $scope.gridOptions.rowData =generateChartData();
        $scope.gridOptions.rowData = generateChartData();
}

列の定義は動的であり、以下に示します。

  function coldef()
{
    for(var i=0;i<headers.length;i++) {
        $scope.customColumns.Push(
                              {
                                  headerName: headers[i],
                                  field:headers[i],
                                  headerClass: 'grid-halign-left',
                                  width:180,
                                  filter: 'set',
                             });
        } }

このヘッダーには配列があります。この配列には異なる学生名が含まれています

 var headers=new Array();
 headers[0]="DATE";
 var Names= Student.map(function (item) { return item.Name}); 
 Names= Names.filter(function (v, i) { return Names.indexOf(v) == i; }); 
         for(var i=1;i<=Names.length;i++)
         {
             headers[i]=Names[i-1];
         }
5
Suny Saju

非同期呼び出しを使用してデータを取得しているようです。そのため、呼び出しが成功すると、グリッドはすでに初期化されています。

グリッドが初期化された後、girdOptions.columnsDefの代わりにグリッドAPI（gridOptions.api ...）を使用する必要があります（ http://www.ag-grid.com/angular-grid-api/indexを参照） .php ）

2
Sebastien
// the api will not be available unless it is compiled with the **$timeout** or **setTimeout** because this javascript library does not fall in angular digest cycle
$timeout(function() {
  $scope.gridOptions.api.setColumnDefs(masterColumnDefs);
}, 0);

これは、ag-gridのAPIにアクセスするのに役立ちます。

お役に立てれば！

2
bhuvanesh G

あなたのコードにはかなりの間違いがあります：

1st：「API」フィールドは開始時に使用できません。それは2つのことを意味することができます：

  1. グリッドはまだロードされていません（呼び出しを_$timeout_または http://www.ag-grid.com の準備完了イベントチェックドキュメントでラップします）。
  2. DOM要素のag-gridディレクティブを忘れたため、グリッドはまったく初期化されません。

2nd：$scope.gridOptions.api.setColumnDefs();ではなく$scope.gridOptions.api.setColumnDefs(myNewColumnsDefs);を使用します

3rd：グリッドがすでに初期化されている場合は、rowDataを使用しないでくださいapi.setRowData(myDatas)を使用してください。 setColumnDefsを呼び出しますが、何も混乱しないと思います。

2
Walfrat
    $scope.gridOptions ={
        enableSorting: true,
        enableFilter: true,
        suppressMovableColumns:true,
        enableColResize: true,
        columnDefs : [],
        rowHeight : 27,
        tooltipField : true,
        suppressLoadingOverlay : true,
        overlayLoadingTemplate: '<span class="ag-overlay-loading-center" style=background:lightgoldenrodyellow>Please wait while your rows are loading</span>',
        //getRowStyle : getRowStyleScheduled
    };       

    $scope.gridRefresh = function() { 
$scope.columnsHeaders =[];
        for (var i = 0, len = $scope.columnsHeaders.length; i < len; i++) {
            $scope.columnsHeaders[i].headerName = $scope.columnsHeaders[i].name;
            $scope.columnsHeaders[i].field = $scope.columnsHeaders[i].field;
            $scope.columnsHeaders[i].cellRenderer = function(params) {
                if(params.value != null) {
                    return '<span title="'+params.value+'">'+params.value+'</span>';
                }else {
                    return null;
                }
            }
         $scope.gridOptions.columnDefs.Push($scope.columnsHeaders[i]);
        }
        $scope.gridOptions.api.setColumnDefs($scope.gridOptions.columnDefs);
        $scope.gridOptions.api.setRowData($scope.Rows);
        $scope.gridOptions.columnApi.autoSizeColumns($scope.gridOptions.columnDefs);
    }
1
Jatin Kakkar

私はangular 6で同じことを探していましたが、このページはグーグルで出てきました。誰かが導き出したい場合に備えて、angular 6で答えを提供しています残りのAPIからの列定義、

列は動的であり、使用可能なグリッド幅に収まるため、サイズの列を使用して収まります

ngOnInit() {
this.gridOptions = {
  onGridSizeChanged: () => {
    this.gridApi.sizeColumnsToFit();
  },
  onNewColumnsLoaded: () => {
    if (this.gridApi) {
      this.gridApi.sizeColumnsToFit();
    }
  },
  defaultColDef: {
    width: 150,
    minWidth: 100,
    maxWidth: 400
  }
};
this.getcolumnData();

}

getcolumnData() {
this.pageType =  this.route.snapshot.paramMap.get('type');
this.http.get(`${this.baseURL}/getStaticMetaData`).subscribe(res => {
  let columnDef = [];
  res.forEach(column => {
    columnDef = [...columnDef, {headerName: column.columnName, field: column.columnId}];
  });
  this.gridApi.setColumnDefs(columnDef);
});

}

onGridReady(params) {
this.gridApi = params.api;
this.http.get(`${this.baseURL}/getStaticData`).subscribe(data => {
  if (data.length < 20) {
    this.isSmallGrid = true;
  }
  this.gridApi.setRowData(data);
}, err => {
  // handle error
});

}

<ag-grid-angular style="width: 100%;" 
  [ngStyle]="{'height.px': isSmallGrid ? '325' : '725'}"
  class="ag-theme-balham"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
  enableColResize enableSorting enableFilter
  >
  </ag-grid-angular>
0
Suchin

括弧が奇妙にペアになっているように見えるので、入力データ（学生）のデータが原因である可能性があると思います（データをコピーしましたが、読みやすいようにフォーマットされています）：

[
    {Date:'12-12-2015',Name:'ammu',mark:20},
    Date:'12-12-2015',Name:'appu',mark:24},
    Date:'12-12-2015',Name:'anu',mark:27},
    Date:'13-12-2016',Name:'ammu',mark:23},
    {Date:'13-12-2015',Name:'anu',mark:20}
]

2行目、3行目、4行目には先頭​​がありません{。

0
Alexei