LoginSignup
28
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@t-iguchi

ag-gridの使い方

Last updated at Posted at 2019-02-07

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

2020.3.21 追加

12. editable

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

<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

<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. 行の取得と更新

<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>
28
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
28
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?