dhtmlxGridの使い方
[edit]

目次

[edit]

概要

Flashでグリッド表示(表での一覧表示)をさせたい場合はコンポーネントが用意されています。
同じようなものが、はたしてWebでないものか…ということで、dhtmlxGridを紹介します。

表にはテキスト他に、下記が対応しています

[edit]

ライセンス形態

このライブラリは、無料版/有料版とあるので注意してください。

ライセンス制約
Open SourceGPL
Commercial License$149 で1プロジェクト利用可能
Enterprise License$449 でプロジェクト制限なし
[edit]

簡単な使い方

まずは、細かい設定はどうでもよいので、動くものを作りたい!というモチベーションの方向けに
サンプルを用意しました。できあがりは↓こうです。

▼簡単なサンプル
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/easy_sample.html

[edit]

1.scriptタグをHTMLページに貼り付けます

<link rel="stylesheet" type="text/css" href="js/dhtmlxGrid/dhtmlxgrid.css">
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxcommon.js"></script>
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxgrid.js"></script>
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxgridcell.js"></script>
[edit]

2.オブジェクトを生成して初期設定を行います

goMyGrid = new dhtmlXGridObject('mylists');
goMyGrid.imgURL = "js/dhtmlxGrid/imgs/";
[edit]

3.列を定義します

goMyGrid.setHeader("id, 値");
goMyGrid.setInitWidths("100,250");
goMyGrid.setColAlign("right,left");
goMyGrid.setColTypes("ro,ed");
goMyGrid.setColSorting("int,str")
goMyGrid.setColumnColor("white,white")
[edit]

4.Gridを初期化します

goMyGrid.init();
[edit]

5.データを登録します

まずは、自力で行を挿入していきましょう。
行を挿入するにはaddRow メソッドを使います。

goMyGrid.addRow(0, '10,hoge', 0);
goMyGrid.addRow(1, '20,fuga', 1);
goMyGrid.addRow(2, '30,foo',  2);
goMyGrid.addRow(3, '40,bar',  3);
[edit]

生成したGridの操作方法

[edit]

キーボード操作

キーボードで操作できます。

キーボード操作させたくない場合は「enableKeyboardSupport(mode)」で切れます。
mode: true/false

[edit]

Cellの編集

列の定義で『編集できる列』と定義した場合は、F2かダブルクリックで編集が可能です。

上記の「簡単なサンプル」では、『値』列が編集可能です。

[edit]

Cellの操作や、行の操作

次は、Cellの操作や、行の操作ができるサンプルを作ってみました。

▼コントロール サンプル
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/controll_sample.html

この記事は書き途中です。。。


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら