[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid

Post on:2013年1月11日

HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。

デモのキャプチャ

HTMLで作成した普通のテーブルが、下のように美しく機能的に！

デモのキャプチャ

ソート、セルサイズの変更、インライン編集などもできます。

ParamQuery gridの特徴

  • 商用利用可のオープンソース。
  • データのフォーマットはHTML, Array, XML, JSONなど。
  • ソート、ページング、カラムのリサイズに対応。
  • デザインはテーマでカスタマイズ可能。
  • バーチャルスクロール・レンダリング。
  • セルのインライン編集。
  • 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。
  • サーバーサイドのフレームワークはASP.NET, MVC3, JSP, JSF, PHPなど。

ParamQuery gridのデモ

デモでは美しくデザインされたテーブルの操作を試すことができます。

サイトのキャプチャ

ParamQuery gridのデモページ

ParamQuery gridの使い方

Step 1: 外部ファイル

まずは、jQueryとjQuer UIを外部ファイルとして記述します。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

その後に、当スタイルシートとスクリプトを記述します。

<link rel="stylesheet" href="pqgrid.min.css" />
<script type="text/javascript" src="pqgrid.min.js" />

Step 2: データの定義

データはHTML, Array, XML, JSONなどさまざまな記述が可能で、ここでは最初のHTMLのテーブルを紹介します。

<table class="fortune500" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr id="header" valign="middle">
<th class="rank">Rank</th>
<th class="company">Company</th>
<th class="revenue">Revenues ($ millions)</th>
<th class="datacell">Profits ($ millions)</th>
</tr>
<!-- repeating rows begin (alternate rowcolor2 and rowcolor1) -->
<tr class="rowcolor2">
<td class="rank">1</td>
<td class="company">Exxon Mobil</td>
<td class="revenue">339,938.0</td>
<td class="datacell">36,130.0</td>
</tr>
<tr id="Tr1" class="rowcolor1">
<td class="rank">2</td>
<td class="company">Wal-Mart Stores</td>
<td class="revenue">315,654.0</td>
<td class="datacell">11,231.0</td>
</tr>
...
...
</table>

Step 3: JavaSCript

スクリプトでテーブルの定義をします。

    $(function () {
        function changeToTable(that) {
            var tbl = $("table.fortune500");
            tbl.css("display", "");
            $("#grid_table").pqGrid("destroy");
            $(that).val("Change Table to Grid");
        }
        function changeToGrid(that) {
            var tbl = $("table.fortune500");
            var obj = $.adapter.tableToArray(tbl);
            var newObj = { width: 700, height: 400 };
            newObj.dataModel = { data: obj.data };
            newObj.colModel = obj.colModel;
            $("#grid_table").pqGrid(newObj);
            $(that).val("Change Grid back to Table");
            tbl.css("display", "none");
        }
        $("#pq-grid-table-btn").button().toggle(function () {            
            changeToGrid(this);
        },
        function () {
            changeToTable(this);
        });
    });

sponsors

top of page

©2024 coliss