ag-gridの使い方

ag-gridについての使い方について、業務で使えそうな機能を列挙しています。

## 1.基本的な使い方

```sample.html
<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="../dist/styles/ag-grid.css">
    <link rel="stylesheet" href="../dist/styles/ag-theme-balham.css">
  </head>
  <body>
    <h1>Hello from ag-grid!</h1>
    <!-- ここに gridを表示する  -->
    <div id="myGrid" style="height: 600px;width:700px;" class="ag-theme-balham"></div>

  <script type="text/javascript">
    // 列情報を定義する
    var columnDefs = [
      {headerName: "Make", field: "make"},
      {headerName: "Model", field: "model"},
      {headerName: "Price", field: "price"}
    ];
    
    // 表示するデータ(JSON)
    var rowData = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];
    
    // ag-gridのオプション
    var gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData
    };

  // lookup the container we want the Grid to use
  var eGridDiv = document.querySelector('#myGrid');
  // create the grid passing in the div to use together with the columns & data we want to use
  new agGrid.Grid(eGridDiv, gridOptions);

  </script>    
  </body>
</html>
```

## 2.クイックフィルタをつける

フィルタ用のinputを定義して、対応するfunctionを以下のように追加する。

```sample.html
  <body>
    <input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()"/>    
  <script>
    function onFilterTextBoxChanged() {
      gridOptions.api.setQuickFilter(document.getElementById('filter-text-box').value);
    }
  </script>
  </body>
```

## 3.列毎にフィルタをつける

列定義に、「filter:true」を追加する。

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Make", field: "make", filter: true},
      {headerName: "Model", field: "model", filter: true},
      {headerName: "Price", field: "price", filter: true}
    ];
  </script>
```

## 4.ソート

列定義に、「sortable: true」を追加する。

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Make", field: "make", filter: true, sortable: true},
      {headerName: "Model", field: "model", filter: true, sortable: true},
      {headerName: "Price", field: "price", filter: true}
    ];
  </script>
```


## 5.行のdrag

列に「rowDrag: true」として、gridOptions に「rowDragManaged: true」を設定する。
※animateRows: true としたら、アニメーションしながらdragする。

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Make", field: "make", filter: true, sortable: true},
      {headerName: "Model", field: "model", filter: true, sortable: true},
      {headerName: "Price", field: "price", filter: true},
      {rowDrag: true}
    ];
    var gridOptions = {
      rowDragManaged: true,
      animateRows: true      
    };
  </script>
```

## 6. Cell Style

列定義に「cellStyle」属性を追加する。

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Make", field: "make", filter: true, sortable: true},
      {headerName: "Model", field: "model", filter: true, sortable: true, cellStyle: {color: 'white', 'background-color': 'pink'}},
      {headerName: "Price", field: "price", filter: true},
      {rowDrag: true}
    ];
  </script>
```

## 7.Checkboxによる行選択

行選択をcheckboxにする場合、列情報に「checkboxSelection: true」としてgridOptions に「rowSelection: 'multiple'」をセットする。

なお、headerCheckboxSelection: true として、ヘッダにcheckboxを表示し、クイックフィルタでフィルタの結果のみを選択させる場合、さらにheaderCheckboxSelectionFilteredOnly: true を追加する。

単一行選択とする場合は、gridOptions の「rowSelection: 'single'」とすればよい。

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Make", field: "make", filter: true, sortable: true,headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true, checkboxSelection: true },
      {headerName: "Model", field: "model", filter: true, sortable: true, cellStyle: {color: 'white', 'background-color': 'pink'}},
      {headerName: "Price", field: "price", filter: true},
      {rowDrag: true}
    ];
    var gridOptions = {
      //追加
      rowSelection: 'multiple',
    };
  </script>
```

## 8.ヘッダグループ

ヘッダをグループ化する場合、children: [ ] をつける

```sample.html
  <script>
    var columnDefs = [
      {headerName: "Group A", children: [
        {headerName: "Make", field: "make", filter: true, sortable: true,headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true, checkboxSelection: true },
        {headerName: "Model", field: "model", filter: true, sortable: true, cellStyle: {color: 'white', 'background-color': 'pink'}},
      ],
      {headerName: "Price", field: "price", filter: true},
      {rowDrag: true}
    ];
    var gridOptions = {
      //追加
      rowSelection: 'multiple',
    };
  </script>
```

## 9. autofit

「sizeColumnsToFit()」を実行する。

```sample.html
  <script>
    gridOptions.api.sizeColumnsToFit();
  </script>

```

## 10. autoSizeColumns

autoSizeAll()を作成して呼び出す。

```sample.html
  <script>
      function autoSizeAll() {
          var allColumnIds = [];
          gridOptions.columnApi.getAllColumns().forEach(function(column) {
              allColumnIds.push(column.colId);
          });
          gridOptions.columnApi.autoSizeColumns(allColumnIds);
      }
      //
      autoSizeAll();
  </script>
```

## 11. html全体

```sample.html
<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/ag-grid-community.min.noStyle.js"></script>
    <link rel="stylesheet" href="../dist/styles/ag-grid.css">
    <link rel="stylesheet" href="../dist/styles/ag-theme-balham.css">
  </head>
  <body>
    <div class="quickfilter">
        <input type="text" id="filter-text-box" placeholder="Filter..." oninput="onFilterTextBoxChanged()"/>    
    </div>
    <div id="myGrid" style="height: 600px;width:700px;" class="ag-theme-balham"></div>

    <script type="text/javascript">
      // specify the columns
    var columnDefs = [
      {headerName: "Group A", children: 
        [
          {headerName: "Make", field: "make", filter: true, sortable: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true, checkboxSelection: true },
          {headerName: "Model", field: "model", filter: true, sortable: true, cellStyle: {color: 'white', 'background-color': 'pink', 'width': '120px' }}
        ]
      },
      {headerName: "Group B", children: 
        [
          {headerName: "Price", field: "price", filter: true},
        ],
      },
      {rowDrag: true}
    ];

      
      // specify the data
      var rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
      ];
      
      // let the grid know which columns and what data to use
      var gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        rowDragManaged: true,
        animateRows: true        
      };

      // lookup the container we want the Grid to use
      var eGridDiv = document.querySelector('#myGrid');

      // create the grid passing in the div to use together with the columns & data we want to use
      new agGrid.Grid(eGridDiv, gridOptions);

      function onFilterTextBoxChanged() {
          gridOptions.api.setQuickFilter(document.getElementById('filter-text-box').value);
      }
      
      gridOptions.api.sizeColumnsToFit();

//      autoSizeAll();

      function autoSizeAll() {
          var allColumnIds = [];
          gridOptions.columnApi.getAllColumns().forEach(function(column) {
              allColumnIds.push(column.colId);
          });
          gridOptions.columnApi.autoSizeColumns(allColumnIds);
      }
    </script>    
  </body>
</html>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/246741/aa9948e2-7fc9-9818-8f12-c71437be0921.png)

#### 2020.3.21 追加

## 12. editable

columnDefsに「editable: true」します。pulldownは「cellEditor」プロパティに「agSelectCellEditor」を指定します。

```html
<script>
    function formatNumber(number) {
        return Math.floor(number).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
    }
    function currencyFormatter(params) {
        var val = (params.value) + '';
        var num = val.split('.');
        var num0 = formatNumber(num[0]);
        return (num.length > 1) ? num0 + "." + num[1] : num0;
    }
    var pulldownlist = [ 'プルダウン１' ,'プルダウン２' ,];
    var data=[
        {'text':'テキスト１', 'numeric':20000, 'pulldown': 'プルダウン１'},
        {'text':'テキスト２', 'numeric':40000, 'pulldown': 'プルダウン２'},
    ]
    var columnDefs = [
      {rowDrag: true, width: 40},
      {headerName: "テキスト", field: "text", width: 200, editable: true},
      {headerName: "数値", field: "numeric", width: 120, editable: true, cellStyle: {"text-align": "right"}, valueFormatter: currencyFormatter},
      {headerName: "プルダウン", field: "pulldown", width: 160, editable: true,
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: pulldownlist,
          }
      },
    ];
    var gridOptions = {
        columnDefs: columnDefs,
        rowData: data,
    };
    var eGridDiv = document.querySelector('#aggrid');
    new agGrid.Grid(eGridDiv, gridOptions);
</script>
```

## 13. custom column

```html
<script>
    {headerName: 'edit button',
        cellRenderer : function(params){
            html="<a href='/update?params="+JSON.stringify(params.data)+"'>edit</a>"
                return html
            }
    }
</script>
```

#### 2021.2.11 追加

## 14. 行の取得と更新

```html:
<div id="aggrid" style="height: 300px;width:700px;" class="ag-theme-balham"></div>
<button onclick="updateData('a','OK');return false;">fileAをOKにする</button>
<button onclick="updateData('b','NG');return false;">fileBをNGにする</button>

<script>
    var columnDefs = [
      {headerName: 'name', field: 'name'},
      {headerName: 'type', field: 'type'},
      {headerName: 'size', field: 'size'},
      {headerName: 'status', field: 'status'},
    ];
    var data = [];
    data.push({'id' : 'a', 'name' : 'fileA', 'type' : 'xlsx', 'size' : 100});
    data.push({'id' : 'b', 'name' : 'fileB', 'type' : 'pdf', 'size' : 200});

    var gridOptions = {
        columnDefs: columnDefs,
        rowData: data,
    };
    //行をkeyで取得するにはデータのid列の値を返すfunctionを作る
    gridOptions.getRowNodeId = function(data) {
        return data.id;
    };
    var eGridDiv = document.querySelector('#aggrid');
    new agGrid.Grid(eGridDiv, gridOptions);

	updateData = function(id, value){

	    //行を取得する
	    var rowNode = gridOptions.api.getRowNode(id);
	    //セルの値を更新する
	    rowNode.setDataValue('status', value);
	}
</script>
```