SlickGridで表を作成する(jQueryプラグイン)

nas2020/10/10

jQueryのプラグインのSlickGridで、表を作成するサンプルです。
(確認環境:SlickGrid 2.4.29)

説明 SlickGridとは
サンプル 表を作成する / Columnのオプションの一覧 / Gridのオプションの一覧
  列名クリックでソートする
  行ごとにチェックボックスをつける
  指定した列を固定にする
  ヘッダをグループ化する

SlickGridとは

  • ブラウザ上にテーブルを表示できます。項目のソート等もできます。
  • jQueryのプラグインです。動かすにはjQueryが必要です。
  • 以下は、SlickGridのページです。Official Releasesのリンクにモジュール(github.com/6pac/SlickGrid)があります。
    https://slickgrid.net/
  • 上記リンク先では、オリジナルのMLeibman SlickGridではなく、Main GitHub Repository (github.com/6pac/SlickGrid)を推奨と書いてあります。

表を作成する

SlickGridでは、以下のような表を作成できます。

上記画像のコードです。
外部のjsとcssファイルは、ダウンロードしたzipファイルに含まれています。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>SlickGrid test</title>
  <link rel="stylesheet" href="./SlickGrid-2.4.29/slick.grid.css"/>
  <link rel="stylesheet" href="./SlickGrid-2.4.29/css/smoothness/jquery-ui.css"/>
  <link rel="stylesheet" href="./SlickGrid-2.4.29/slick-default-theme.css"/>
  <style> 
	* {
		font-family: arial;
		font-size: 8pt;
	}
	#testGrid {
		background: white;
		outline: 0;
		border: 1px solid gray;
	}
  </style> 
</head>
<body>

<div id="testGrid" style="width:216px;height:158px;"></div>

<script src="./SlickGrid-2.4.29/lib/jquery-3.1.0.js"></script>
<script src="./SlickGrid-2.4.29/lib/jquery.event.drag-2.3.0.js"></script>
<script src="./SlickGrid-2.4.29/slick.core.js"></script>
<script src="./SlickGrid-2.4.29/slick.grid.js"></script>
<script>
  var grid;
  var columns = [
    {id: "ID", name: "ID", field: "id", width: 50},
    {id: "name", name: "name", field: "name", width: 80},
    {id: "romaji", name: "romaji", field: "romaji", width: 80},
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = [];
	data[0] = {id:"1",name:"鈴木",romaji:"suzuki"};
	data[1] = {id:"2",name:"田中",romaji:"tanaka"};
	data[2] = {id:"3",name:"佐藤",romaji:"sato"};
	data[3] = {id:"4",name:"竹田",romaji:"takeda"};
	data[4] = {id:"5",name:"山田",romaji:"yamada"};

    grid = new Slick.Grid("#testGrid", data, columns, options);
  });
</script>
</body>
</html>

23行目は、SlickGridが表示される箇所です。
31行目は、Column のオプションを設定しています。
37行目は、Grid のオプションを設定しています。
43行目は、データ部分です。
50行目は、SlickGridを実行します。引数として場所、データ、Columnのオプション、Gridのオプションを指定しています。

Column のオプションの一覧

https://github.com/6pac/SlickGrid/wiki/Column-Options

Grid のオプションの一覧

https://github.com/6pac/SlickGrid/wiki/Grid-Options

 

列名クリックでソートする

各列ごとにソートできます。

　

上記画像のコードです。

オプションにmultiColumnSort: trueを追加します。

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
	multiColumnSort: true
  };

上記 50行目の「grid = new Slick.Grid～」の後に以下のコードを追加します。

    grid.onSort.subscribe(function (e, args) {
      var cols = args.sortCols;

      data.sort(function (dataRow1, dataRow2) {
        for (var i = 0, l = cols.length; i < l; i++) {
          var field = cols[i].sortCol.field;
          var sign = cols[i].sortAsc ? 1 : -1;
          var value1 = dataRow1[field], value2 = dataRow2[field];
          var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
          if (result != 0) {
            return result;
          }
        }
        return 0;
      });
      grid.invalidate();
      grid.render();
    });

https://github.com/6pac/SlickGrid/blob/master/examples/example-multi-column-sort.html

 

行ごとにチェックボックスをつける

　

行ごとにチェックボックスを追加できます。
ヘッダーのチェックボックスをクリックすると全行選択状態になります。

変更箇所１：外部jsを追加します。

<script src="./SlickGrid-2.4.29/plugins/slick.checkboxselectcolumn.js"></script>
<script src="./SlickGrid-2.4.29/plugins/slick.rowselectionmodel.js"></script>

 

変更箇所２：30行目のvar gridの後に以下を追加します。

	var checkboxSelector = new Slick.CheckboxSelectColumn({
		cssClass: "slick-cell-checkboxsel"
	});

 

変更箇所３：columsへの代入の箇所に以下の2行目を追加します。

  var columns = [
    checkboxSelector.getColumnDefinition(),
    {id: "ID", name: "ID", field: "id", width: 50},
    {id: "name", name: "name", field: "name", width: 80},
    {id: "romaji", name: "romaji", field: "romaji", width: 80},
  ];

 

変更箇所４：上記 50行目の「grid = new Slick.Grid～」の後に以下のコードを追加します。

	grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
	grid.registerPlugin(checkboxSelector);

 

指定した列を固定にする

　

横のスクロールバーを左から右に動かしても「id」の列は固定で動きません。

オプションにfrozenColumn: 列数-1を追加します。
以下は0なので1列目のみ固定されます。

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
	frozenColumn: 0
  };

 

ヘッダをグループ化する

上記画像の「名前です」は2列にわたってグループ化しています。

変更箇所１：columnsにcolumsGroupを追加します。
optionsに以下２行を追加します。

  var columns = [
    {id: "ID", name: "ID", field: "id", width: 40},
    {id: "name", name: "name", field: "name", width: 80,columnGroup:"名前です"},
    {id: "romaji", name: "romaji", field: "romaji",width: 80,columnGroup:"名前です"},
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    createPreHeaderPanel: true,
    showPreHeaderPanel: true
  };

 

変更箇所２：上記 50行目の「grid = new Slick.Grid～」の後に以下のコードを追加します。

	grid.onColumnsResized.subscribe(function (e, args) {
      CreateAddlHeaderRow();
    });
    
    CreateAddlHeaderRow();

 

変更箇所３：上記51行目の「});」より下に以下のfunctionを追加します。

  function CreateAddlHeaderRow() {
    var $preHeaderPanel = $(grid.getPreHeaderPanel())
        .empty()
        .addClass("slick-header-columns")
        .css('left','-1000px')
        .width(grid.getHeadersWidth());
    $preHeaderPanel.parent().addClass("slick-header");

    var headerColumnWidthDiff = grid.getHeaderColumnWidthDiff();
    var m, header, lastColumnGroup = '', widthTotal = 0;
    
    for (var i = 0; i < columns.length; i++) {
      m = columns[i];
      if (lastColumnGroup === m.columnGroup && i>0) {
        widthTotal += m.width;
        header.width(widthTotal - headerColumnWidthDiff)
      } else {
          widthTotal = m.width;
          header = $("<div class='ui-state-default slick-header-column' />")
            .html("<span class='slick-column-name'>" + (m.columnGroup || '') + "</span>")
            .width(m.width - headerColumnWidthDiff)
            .appendTo($preHeaderPanel);
      }
      lastColumnGroup = m.columnGroup;
    }
  }

https://github.com/6pac/SlickGrid/blob/master/examples/example-column-group.html

関連の記事

jqGridで表を作成する(jQueryプラグイン)

△上に戻る