SlickGridを使ってみる #jQuery

JavaScriptのGridライブラリ決定版 - SlickGrid - Qiita [キータ]で紹介されているmleibman/SlickGridを使ってみたメモです。

Examples · mleibman/SlickGrid Wikiにいろいろ例があるので、それを見ながら自分でも試してみました。

この記事では基本機能を使った例を紹介します。

完全なソースは
https://github.com/hnakamur/slickgrid_example/tree/91e89396374cb23ad9d1ec339888896867f9a0a4
にあります。

Dependenciesに書かれているようにSlickGridは以下のライブラリに依存しています。

jQuery
jQueryUI Sortable (optional, only if column reordering is enabled)
jquery.event.drag – http://threedubmedia.com/code/event/drag
jquery.event.drop – http://threedubmedia.com/code/event/drop

index.htmlでは以下のように必要なCSSとライブラリを読み込みます。グリッドは<div>でマークアップします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SlickGrid example</title>
<link rel="stylesheet" href="css/slick.grid.css"/>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="css/examples.css"/>
</head>
<body>
<div id="myGrid" style="width:800px;height:400px;"></div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src="js/jquery.event.drag-2.2.js"></script>

<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/slick.editors.js"></script>

<script src="js/example.js"></script>
</body>
</html>

js/example.jsでは列、データ、オプションを指定してグリッドを生成します。

$(function () {
  var columns = [
    {id: "id", name: "ID", field: "id", minWidth: 24, width: 24, editor: Slick.Editors.Text},
    {id: "title", name: "書名", field: "title", width: 200, editor: Slick.Editors.Text},
    {id: "authors", name: "著者", field: "authors", width: 160, editor: Slick.Editors.Text},
    {id: "publisher", name: "出版社", field: "publisher", editor: Slick.Editors.Text},
    {id: "published-on", name: "出版日", field: "publishedOn", width: 70, editor: Slick.Editors.Text},
    {id: "book-type", name: "書籍種別", field: "bookType", width: 40, editor: Slick.Editors.Text},
    {id: "book-info-url", name: "書籍情報URL", field: "bookInfoURL", editor: Slick.Editors.Text},
    {id: "purchase-url", name: "購入URL", field: "purchaseURL", editor: Slick.Editors.Text},
    {id: "reading-status", name: "読書状態", field: "readingStatus", width: 46, editor: Slick.Editors.Text}
  ];

  var data = [
    {
      id: 1,
      title: "パーフェクトRuby",
      authors: "Rubyサポーターズ, すがわら まさのり, 寺田 玄太郎, 三村 益隆, 近藤 宇智朗, 橋立 友宏, 関口 亮一",
      publisher: "技術評論社",
      publishedOn: "2013-08-10",
      bookType: "紙",
      bookInfoURL: "http://www.amazon.co.jp/dp/4774158798",
      purchaseURL: "http://www.yodobashi.com/%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88Ruby-%E5%8D%98%E8%A1%8C%E6%9C%AC/pd/100000009001925295/",
      readingStatus: "読書中"
    },
    {
      id: 2,
      title: "Sphinxをはじめよう",
      authors: "清水川貴之, 小宮健, 山田剛, 若山史郎",
      publisher: "O'Reilly Japan",
      publishedOn: "2013-09-01",
      bookType: "mobi",
      bookInfoURL: "http://www.oreilly.co.jp/books/9784873116488/",
      purchaseURL: "http://www.oreilly.co.jp/books/9784873116488/",
      readingStatus: "読了"
    },
// ...(snip)...
    {
      id: 20,
      title: "Working With Unix Processes",
      authors: "Jesse Storimer",
      publisher: "Amazon Services International, Inc.",
      bookType: "mobi",
      bookInfoURL: "http://www.amazon.co.jp/dp/B0078VSRUE",
      purchaseURL: "http://www.amazon.co.jp/dp/B0078VSRUE",
      readingStatus: "読書中"
    }
  ];

  var options = {
    editable: true
  };

  var grid = new Slick.Grid("#myGrid", data, columns, options);
});

グリッドのオプションと列のオプションについては下記に説明があります。