dhtmlxGridの使い方 http://www.ark-web.jp/sandbox/wiki/270.html

dhtmlxGridの使い方
[edit]

目次

[edit]

概要

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

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

[edit]

ライセンス形態

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

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

簡単な使い方

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

▼簡単なサンプル
dhtmlxgrid_sample_img01.jpg
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の操作や、行の操作ができるサンプルを作ってみました。

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

professional版でなくても、行の追加/削除/コピー/データ書き出しくらいは可能なことが分かると思います。

ただ、professional版には↓このような機能がついているので便利です。

主なAPIは下記を参照してください。

[edit]

ドラッグ&ドロップ他いろいろ

ドラッグ&ドロップや、XMLロードなどいろいろやってみたサンプルを作ってみました。

▼いろいろ サンプル
dhtmlxgrid_sample_img03.jpg
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/gotta_sample.html

表のドラッグ&ドロップはprofessional版でないのに機能として提供しているのが結構嬉しいところです。

ただ、XMLからロードはできますがセーブする機能がないのがちょっと不便そうな気がしました。。
まぁ、professional版を買わないなら、地道にパースしてAjaxでサーバにPOSTできるのでOKとしましょう。

[edit]

オブジェクト生成後の初期設定と列の定義

では、具体的にオブジェクト生成後に行っていた初期設定について説明します。

[edit]

初期設定方法

goMyGrid = new dhtmlXGridObject('mygrid');
goMyGrid.imgURL = "js/dhtmlxGrid/imgs/";
goMyGrid.enableDragAndDrop(true);  // デフォルトfalse
goMyGrid.enableMultiselect(true);  // デフォルトfalse
goMyGrid.enableResizing("false,true");  // デフォルトtrue
goMyGrid.enableRowsHover(true,'xhdr');  // デフォルトなし
[edit]

列の定義方法

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

主なAPI

professionalは除いたメソッドを紹介しています。

[edit]

addRow - 行の追加

addRow ― 行を追加します。

パラメータ

goMyGrid.addRow(0, '10,hoge', 0);
[edit]

deleteSelectedItem - 選択中の行削除

deleteSelectedItem ― 選択中の行を削除します。

パラメータ

goMyGrid.deleteSelectedItem();
[edit]

deleteRow - 指定した行の削除

deleteRow ― 指定した行を削除します。

パラメータ

goMyGrid.deleteRow(0);
[edit]

getSelectedId - 現在選択中の行

getSelectedId - 現在選択中の行IDを返します。

パラメータ

goMyGrid.getSelectedId();
[edit]

copyRowContent - 行のコピー

copyRowContent ― 行のコピーをします。

パラメータ

goMyGrid.copyRowContent(goMyGrid.getSelectedId(), Number(goMyGrid.getSelectedId()) + 1);
[edit]

moveRowUp - 表示位置を1つあげる

moveRowUp ― 表示位置を1つ上にあげます。

パラメータ

goMyGrid.moveRowUp(goMyGrid.getSelectedId());
[edit]

moveRowDown - 表示位置を1つさげる

moveRowDown ― 表示位置を1つ下にさげます。

パラメータ

goMyGrid.moveRowDown(goMyGrid.getSelectedId());
[edit]

cells - 指定Cell情報を返す

cells - 指定Cell情報を返します。

パラメータ

var oDhtmlXGridCellObject = goMyGrid.cells(0,1).cell;
[edit]

cells2 - 指定Cell情報を返す

cells2 - 指定Cell情報を返します (ただし、インデックス指定)

パラメータ

var oDhtmlXGridCellObject = goMyGrid.cells2(0,1).cell;
[edit]

getRowsNum - 行数を返す

getRowsNum ― 行数を返します。

パラメータ

for (var i = 0 ; i < goMyGrid.getRowsNum() ; i++ ) {
    ...
}
[edit]

forEachCell - 各Cellに対して処理を設定

forEachCell ― 各Cellに対して指定したハンドラを実行できます。

パラメータ

goMyGrid.forEachCell(
    0,
    function(dhtmlXGridCellObject){ 
        var oElm  = document.getElementById('data2');
        var sData = dhtmlXGridCellObject.cell.textContent;
        oElm.innerHTML += sData;
    })
[edit]

loadXML - XMLをロード

loadXML ― XMLをGridにロードします。

パラメータ

goMyGrid.loadXML('test.xml');

XMLの例

<?xml version="1.0"?>
<rows>
	<row id="4">
		<cell>E</cell>
		<cell>enyo</cell>
	</row>
	<row id="5">
		<cell>F</cell>
		<cell>feel</cell>
	</row>
	<row id="6">
		<cell>G</cell>
		<cell>gaile</cell>
	</row>
	<row id="7">
		<cell>H</cell>
		<cell><![CDATA[<font color="red">joy</font>]]></cell>
	</row>
</rows>
[edit]

dhtmlXGridCellObject について

1つのCellを表す dhtmlXGridCellObject オブジェクトの内容を簡単に紹介します。

[edit]

getValue - 値の取得

getValue - 該当Cellの値を返します。

パラメータ

goMyGrid.cells(0,1).getValue();
[edit]

setValue - 値の設定

setValue - 該当Cellの値を設定します。

パラメータ

goMyGrid.cells(0,1).setValue('my setting');
[edit]

その他の情報

ここで紹介していない、チェックボックス/ラジオボタン/コンボボックス等のコントローラ系や、
ドラッグ&ドロップ等のイベントの種類などのドキュメントは↓こちらにあります。

▼dhtmlxgrid API (英語)
http://dhtmlx.com/docs/products/docsExplorer/index.shtml?node=dhtmlxgrid

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, ライブラリ?, Grid?


添付ファイル: filedhtmlxgrid_sample_img03.jpg 753件 [詳細] filedhtmlxgrid_sample_img02.jpg 763件 [詳細] filedhtmlxgrid_sample_img01.jpg 799件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-12-11 (火) 16:15:51 (4332d)

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