感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

データをExcel風の表にして表示するjQueryプラグイン

スポンサーリンク

データをExcel風の表にして表示するjQueryプラグイン

JavaScriptで、ブラウザにキレイな表を表示させたいとずっと思っていた。
で、色々と探していたんだけど、jQuery Grid Pluginなるものがあった。
以下からダウンロードできる。
http://paramquery.com/

デモはこちら。
http://paramquery.com/demos

デモを真似して作ってみると、なかなか良い感じの表がブラウザに表示される。
列をクリックすると並べ替えもできて、見栄えもかなりよい。
けっこうExcelっぽい感じに表示される。
サンプルはこんな感じ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="grid/pqgrid.min.css" />
    <script src="grid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="grid/themes/office/pqgrid.css" />
<script>
    $(function () {
        var data = [[1, 'hagex-day.info', 'hagex', '知性的'],
            [2, '世界はあなたのもの', 'the-world-is-yours', '面白い'],
			[3, '今日も得るものなし', 'kyoumoe', 'なんかすごい'],
			[4, 'イケダハヤト', 'IHayato', '耐久力の塊']];


        var obj = { width: 700, height: 200, title: "よく見るブログ",resizable:true,draggable:true };
        obj.colModel = [{ title: "No", width: 100, dataType: "integer" },
        { title: "ブログ名", width: 200, dataType: "string" },
        { title: "ブログID", width: 150, dataType: "float", align: "right" },
        { title: "特徴", width: 150, dataType: "float", align: "right"}];
        obj.dataModel = { data: data };
        $("#grid_array").pqGrid(obj);
       });

</script>
</head>
<body>
<div id="grid_array" style="margin:100px;"></div>
</body>
</html>

データはこの部分で定義している。文字列は''(シングルクォート)で囲む。
intは囲まない。

        var data = [[1, 'hagex-day.info', 'hagex', '知性的'],
            [2, '世界はあなたのもの', 'the-world-is-yours', '面白い'],
			[3, '今日も得るものなし', 'kyoumoe', 'なんかすごい'],
			[4, 'イケダハヤト', 'IHayato', '耐久力の塊']];

表の形式を定義しているのはここの部分。widthとlegthは表のサイズで、titleは表のタイトルである。resizableはユーザが表のサイズを変更可能か。

var obj = { width: 700, height: 200, title: "よく見るブログ",resizable:true,draggable:true };

表の見出しを設定しているのは以下の部分。
型や見出し名を設定している。

        obj.colModel = [{ title: "No", width: 100, dataType: "integer" },
        { title: "ブログ名", width: 200, dataType: "string" },
        { title: "ブログID", width: 150, dataType: "float", align: "right" },
        { title: "特徴", width: 150, dataType: "float", align: "right"}];

このHTMLを開くと、以下のような表がブラウザに表示される。

参考文献

現場で役立つjQueryデザインパーツライブラリ

現場で役立つjQueryデザインパーツライブラリ


表のサンプルなんかはまさに求めていたものなので、大変ありがたかった。
他にも色々と見て行きたい。

感謝のプログラミング

今回で感謝のプログラミングは【494時間目】
10000時間まで、あと【9506時間】