#pgid

** 目次 [#w5f0b3c3]
#contents

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

- dhtmlxGrid公式サイト
http://dhtmlx.com/docs/products/dhtmlxGrid/

表にはテキスト他に、下記が対応しています
- 画像表示
- リンク
- チェックボックス
- ラジオボタン
- コンボボックス

*** ライセンス形態 [#tf3dea74]
このライブラリは、無料版/有料版とあるので注意してください。

| ライセンス         | 制約 |h
| Open Source        | GPL  |
| Commercial License | $149 で1プロジェクト利用可能 |
| Enterprise License | $449 でプロジェクト制限なし |
- 以下では、Open Source以外を「professional版」と呼びます。


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

[[▼簡単なサンプル:http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/easy_sample.html]]
&ref(dhtmlxgrid_sample_img01.jpg,nolink);
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/easy_sample.html

#blikimore

*** 1.scriptタグをHTMLページに貼り付けます [#yd4d3dce]
 <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>

*** 2.オブジェクトを生成して初期設定を行います [#r6f25e37]
 goMyGrid = new dhtmlXGridObject('mylists');
 goMyGrid.imgURL = "js/dhtmlxGrid/imgs/";
- 「COLOR(blue){js/dhtmlxGrid/}」の部分は変更してください

*** 3.列を定義します [#k91053a7]
 goMyGrid.setHeader("id, 値");
 goMyGrid.setInitWidths("100,250");
 goMyGrid.setColAlign("right,left");
 goMyGrid.setColTypes("ro,ed");
 goMyGrid.setColSorting("int,str")
 goMyGrid.setColumnColor("white,white")

*** 4.Gridを初期化します [#o956ca2d]
 goMyGrid.init();

*** 5.データを登録します [#g0a4437e]
まずは、自力で行を挿入していきましょう。
行を挿入するには''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);


** 生成したGridの操作方法 [#sb20f54f]
*** キーボード操作 [#yd6aa884]
キーボードで操作できます。

- Tab、Shift+TabでCellを移動できます
- [↑]キー、[↓]キーで行を移動できます
- F2でCellを編集できます (編集できるCellの場合)

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

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

上記の「[[簡単なサンプル>http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/easy_sample.html]]」では、『値』列が編集可能です。


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

[[▼コントロール サンプル:http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/controll_sample.html]]
&ref(dhtmlxgrid_sample_img02.jpg,nolink);
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/controll_sample.html

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

ただ、professional版には↓このような機能がついているので便利です。
- CSVへの書き出し
- Gridのシリアライズ
- シリアライズしたデータのCookieへの保存

主なAPIは[[下記>http://www.ark-web.jp/sandbox/wiki/270.html#api]]を参照してください。


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

[[▼いろいろ サンプル:http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/gotta_sample.html]]
&ref(dhtmlxgrid_sample_img03.jpg,nolink);
http://okra.ark-web.jp/~takemura/public/js/dhtmlxgrid/gotta_sample.html

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

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


** オブジェクト生成後の初期設定と列の定義 [#f19cbad5]
では、具体的にオブジェクト生成後に行っていた初期設定について説明します。

*** 初期設定方法 [#r6f59c39]
 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');  // デフォルトなし

- コンストラクタに渡している引数は、<div>タグのid属性です。
 <div id="mygrid" width="325" height="250"></div>
- 2行目の「imgURL」を設定しないとソートの画像などがちゃんと表示されません。
- その他、enableXXXXXはお好みで設定できます。

*** 列の定義方法 [#obea3cc6]
 goMyGrid.setHeader("id, 値");
 goMyGrid.setInitWidths("100,250");
 goMyGrid.setColAlign("right,left");
 goMyGrid.setColTypes("ro,ed");
 goMyGrid.setColSorting("int,str")
 goMyGrid.setColumnColor("white,white")

- 順番がアレゲですが、setColTypes が一番重要です。
-- 列の種類は↓このようになっています。
--- ro: 読み込みのみのテキスト。
--- ed: 1行テキスト。編集可能。
--- link: リンク(<a>タグ)を指定可能。
--- image: 画像(<img>タグ)を指定可能。
--- 詳しくは↓コチラ参照 (英語)
http://dhtmlx.com/docs/products/dhtmlxGrid/doc/excell_types.html
-- これをテキストで , 区切りで列分だけ定義します。

- setHeaderはヘッダーの指定です。
-- ヘッダー列を指定しないと列として生成されません!

- setInitWidthsは各列の横幅をpicel単位で指定します。

- setColAlignは左右どちらに表示するかを指定します。

- setColSortingはソート時の扱いを指定します。

- setColumnColorは列の背景色を指定します。


** 主なAPI [#api]
professionalは除いたメソッドを紹介しています。

*** addRow - 行の追加 [#sf1b915a]
addRow ― 行を追加します。

''パラメータ''
- domObject addRow(new_id,text,ind)
-- new_id: 新しい行(row)のID
-- text: 行に挿入する値 配列/スカラーいずれでもOK
-- [ind]: 行のインデックス(?)
-- domObject: DOMオブジェクト (HTMLTableRowElement)

''例''
 goMyGrid.addRow(0, '10,hoge', 0);
- '10,hoge'の部分は、各列に挿入されます。この値は省略も可能です。
 goMyGrid.addRow(0, '10', 0);
-- ↑こうした場合は、2列目は空欄になります

*** deleteSelectedItem - 選択中の行削除 [#m5439a10]
deleteSelectedItem ― 選択中の行を削除します。

''パラメータ''
- deleteSelectedItem()

''例''
 goMyGrid.deleteSelectedItem();
- 現在選択中の行が削除されます。選択されていない場合は何も起こりません。

*** deleteRow - 指定した行の削除 [#ed25e434]
deleteRow ― 指定した行を削除します。

''パラメータ''
- deleteRow(row_id, node)
-- row_id: 削除対象の行のID
-- node: 予備

''例''
 goMyGrid.deleteRow(0);

*** getSelectedId - 現在選択中の行 [#h96447fa]
getSelectedId - 現在選択中の行IDを返します。

''パラメータ''
- String getSelectedId()
-- String: 現在選択中の行ID。複数の場合は , で区切られた文字列が返ります。

''例''
 goMyGrid.getSelectedId();
-- 選択されていない場合は null を返します。

*** copyRowContent - 行のコピー [#yf0943ef]
copyRowContent ― 行のコピーをします。

''パラメータ''
- copyRowContent(from_row_id, to_row_id)
-- from_row_id: コピー元の行ID
-- to_row_id: コピー先の行ID

''例''
 goMyGrid.copyRowContent(goMyGrid.getSelectedId(), Number(goMyGrid.getSelectedId()) + 1);
-- 現在選択中の行の1つ下の行に選択中の行をコピーします。この時、コピー先の行は上書きされます。

*** moveRowUp - 表示位置を1つあげる [#x41da84d]
moveRowUp ― 表示位置を1つ上にあげます。

''パラメータ''
- moveRowUp(row_id)
-- row_id: 1つ上にあげる行ID

''例''
 goMyGrid.moveRowUp(goMyGrid.getSelectedId());
-- 現在選択中の行を 1つ上にあげます。見た目の操作だけで、行ID的には変わりません。

*** moveRowDown - 表示位置を1つさげる [#l6fd7608]
moveRowDown ― 表示位置を1つ下にさげます。

''パラメータ''
- moveRowDown(row_id)
-- row_id: 1つ下にさげる行ID

''例''
 goMyGrid.moveRowDown(goMyGrid.getSelectedId());
-- 現在選択中の行を 1つ下にさげます。見た目の操作だけで、行ID的には変わりません。

*** cells - 指定Cell情報を返す [#i60f5bf4]
cells - 指定Cell情報を返します。

''パラメータ''
- dhtmlXGridCellObject cells(row_id, col)
-- row_id: 対象の行ID
-- col: 対象の列数 (0からの値)
-- dhtmlXGridCellObject: 該当のCell情報

''例''
 var oDhtmlXGridCellObject = goMyGrid.cells(0,1).cell;
-- 0行目1列のCell情報を返します。
-- dhtmlXGridCellObjectについては[[こちら>http://www.ark-web.jp/sandbox/wiki/270.html#dhtmlXGridCellObject]]

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

''パラメータ''
- dhtmlXGridCellObject cells(row_index, col)
-- row_index: 対象の行数 (0からの値)
-- col: 対象の列数 (0からの値)
-- dhtmlXGridCellObject: 該当のCell情報

''例''
 var oDhtmlXGridCellObject = goMyGrid.cells2(0,1).cell;
-- 0行目1列のCell情報を返します。ドラッグ&ドロップ等で表示順序が変えた時に見た目のままの行を指定できます。
-- dhtmlXGridCellObjectについては[[こちら>http://www.ark-web.jp/sandbox/wiki/270.html#dhtmlXGridCellObject]]

*** getRowsNum - 行数を返す [#ye18d094]
getRowsNum ― 行数を返します。

''パラメータ''
- Number getRowsNum()
-- Number: 行数

''例''
 for (var i = 0 ; i < goMyGrid.getRowsNum() ; i++ ) {
     ...
 }

*** forEachCell - 各Cellに対して処理を設定 [#i853ad4f]
forEachCell ― 各Cellに対して指定したハンドラを実行できます。

''パラメータ''
- forEachCell(rowId, custom_code)
-- rowId: 対象とする行ID
-- custom_code: ハンドラ。引数は dhtmlXGridCellObject

''例''
 goMyGrid.forEachCell(
     0,
     function(dhtmlXGridCellObject){ 
         var oElm  = document.getElementById('data2');
         var sData = dhtmlXGridCellObject.cell.textContent;
         oElm.innerHTML += sData;
     })
-- 0行目の各Cellについて、id="data2"のinnderHTMLにその内容を書き出すように指定しています。

*** loadXML - XMLをロード [#m88e5201]
loadXML ― XMLをGridにロードします。

''パラメータ''
- loadXML(url, afterCall)
-- url: XMLのURL
-- afterCall: XML読み込み時のハンドラ

''例''
 goMyGrid.loadXML('test.xml');
-- Gridに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>
-- rowタグのid属性は行IDです。UNIQになるようにする必要があります。
-- タグは<![CDATA[...]]>に記述します。


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

*** getValue - 値の取得 [#n1e1fe3a]
getValue - 該当Cellの値を返します。

''パラメータ''
- String getValue()
-- String: 値

''例''
 goMyGrid.cells(0,1).getValue();
-- 0行目1列の値を返します。


*** setValue - 値の設定 [#ib08a3a4]
setValue - 該当Cellの値を設定します。

''パラメータ''
- setValue(String)
-- String: 値

''例''
 goMyGrid.cells(0,1).setValue('my setting');
-- 0行目1列に「my setting」を設定します。


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

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

#blikifooter(竹村)

----
tag:[[JavaScript>tag/JavaScript]], [[ライブラリ>tag/ライブラリ]], [[Grid>tag/Grid]]


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

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