1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5 <title>Rico SimpleGrid</title>
6 <link href="ricoDocs.css" rel="Stylesheet" type="text/css">
10 <h1>Rico SimpleGrid の作成</h1>
12 <p>SimpleGrid は Rico 2.0 で追加され、LiveGrids と同じ機能のいくらかを共有します -
13 リサイズ可能な列、固定された列と固定された見出し。
14 しかしながら、LiveGrid と異なり、データは静的であり DOM に存在します -
15 それゆえに、バッファリング、AJAX リフレッシュ、ソート、フィルタリングの機能がありません。
16 なぜ、SimpleGrid を使うのでしょうか?
18 <li>それぞれのセルが含むことが出来るものが、より柔軟であるので -
19 列内のセルがすべて同じタイプである必要はありません。
20 <li>状況によって、それは LiveGrid よりクライアント上で、より良く実行することができます。
21 特にグリッドに多くの列を表示している遅いクライアントで。
22 <li>最後に、SimpleGrid は入力要素である(チェックボックス、セレクトリスト、その他)を含むことができます。
23 LiveGrid も入力要素を含むことができますが、要素の値が LiveGrid のバッファに保存されるので、
24 サーバに値をサブミットするには扱いにくいです。
25 SimpleGrids は、この問題で苦しみません。
26 あなたが単に標準的な <code><form>...</form></code> タグでグリッド全体を囲めば、
27 グリッド中のどんな入力要素でもサーバーへサブミットされます。
30 <p>SimpleGrids は、次の 2 つの方法で作成する事が出来ます。
32 <li>SimpleGrid プラグインの中の 1 つを用いて。PHP、ASP と .net のためのプラグインが存在します。
33 <li>XSLTを用いて。Rico は、標準的なHTMLテーブルを SimpleGrid に変換する XSL ファイルを持っています。
36 <h2>利用モデル 1: SimpleGrid プラグインの利用</h2>
37 <p>このセクションは、Rico ディストリビューションに含まれる
38 simplegrid.php/asp/aspx の実例について記述します
42 <li>最初に、SimpleGrid プラグインへの参照を作成して下さい。
44 require "../../plugins/php/SimpleGrid.php";
46 <li>SimpleGrid プラグインクラスのインスタンスを作成して下さい(サーバサイド)。
48 $grid=new SimpleGrid();
52 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します -
54 メインの見出し行の列数は、データの列数と <em>必ず</em> 同じでなければなりません。
55 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。
56 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。
58 $grid->AddHeadingRow(true);
59 for ($c=1; $c<=$numcol; $c++) {
60 $grid->AddCell("Column $c");
64 <li>グリッドデータセクションを実装して下さい。
65 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <code><tr></code> タグを配置します。
66 どこででも AddCell() を呼んで、 <code><td></code> タグを配置します。
68 for ($r=1; $r<=100; $r++) {
71 for ($c=2; $c<=$numcol; $c++) {
72 $grid->AddCell("Cell $r:$c");
77 <li>テーブルをレンダリングして下さい(html 出力を生成します)。
78 最初のパラメータはグリッド id で、第二のパラメータは、固定された列の数です。
80 $grid->Render("ex1", 1);
87 <li>最初に、SimpleGrid プラグインへの参照を作成して下さい。
89 <!-- #INCLUDE FILE = "../../plugins/asp/SimpleGrid.vbs" -->
92 <li>SimpleGrid プラグインクラスのインスタンスを作成して下さい(サーバサイド)。
94 set grid=new SimpleGrid
98 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します -
100 メインの見出し行の列数は、データの列数と <em>必ず</em> 同じでなければなりません。
101 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。
102 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。
104 grid.AddHeadingRow true
106 grid.AddCell "Column " & c
110 <li>グリッドデータセクションを実装して下さい。
111 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <code><tr></code> タグを配置します。
112 どこででも AddCell() を呼んで、<code><td></code> タグを配置します。
118 grid.AddCell "Cell " & r & ":" & c
123 <li>テーブルをレンダリングして下さい(html 出力を生成します)。
124 最初のパラメータはグリッド id で、第二のパラメータは、固定された列の数です。
132 <li>最初に、SimpleGrid プラグインへの参照を作成して下さい。
134 <%@ Register TagPrefix="Rico" TagName="SimpleGrid"
135 Src="../../plugins/dotnet/SimpleGrid.ascx" %>
138 <li>SimpleGrid プラグインクラスのインスタンスを作成して下さい(サーバサイド)。
140 <Rico:SimpleGrid runat='server' id='ex1' FrozenCols='1' />
143 <li>グリッドの見出しを作成して下さい - 通常は Page_Load イベント内で。
144 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します -
146 メインの見出し行の列数は、データの列数と <em>必ず</em> 同じでなければなりません。
147 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。
148 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。
150 ex1.AddHeadingRow(true)
152 ex1.AddCell("Column " & c)
156 <li>グリッドデータセクションを実装して下さい。
157 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <code><tr></code> タグを配置します。
158 どこででも AddCell() を呼んで、<code><td></code> タグを配置します。
164 ex1.AddCell("Cell " & r & ":" & c)
169 <li>他のプラグインと違い、.net コントロールにより自動的にレンダリングされます。
172 <li>最後に、利用されるプラグインに関係なく javascript SimpleGrid オブジェクトを
173 初期化する必要があります(クライアントサイド):
175 <script type='text/javascript'>
176 Rico.loadModule('SimpleGrid','greenHdg.css');
178 Rico.onLoad( function() {
180 columnSpecs: ['specQty'] // display first column as a numeric quantity
182 var ex1=new Rico.SimpleGrid ('ex1', opts);
190 <h2>利用モデル 2: XSLT 変換の利用</h2>
192 <p>ウェブページが XHTML 対応であるなら、ページ上の標準的な html テーブルを、
193 "ricoSimpleGrid.xsl" XSL スタイルシートを利用した SimpleGrid にする事が可能です。
194 一時、Rico はクライアントでこの変換をする事をサポートしていました。
195 しかし、Prototype ライブラリの変化により、これは既に可能でありません。
196 したがって、このアプローチを使う方を選ぶなら、XSLT 変換は <em>必ず</em> サーバで実行されなければなりません。
197 サーバサイド変換を行うインストラクション。
199 <li><a href="http://www.php.net/manual/en/ref.xsl.php">PHP5 を利用して</a>
200 <li><a href="http://www.topxml.com/dotnet/articles/xslt/default.asp">.net を利用して</a>
203 <p>この変換は "ricoSimpleGrid" クラスでテーブルをコンバートするだけです。
205 <table id='test1' class='ricoSimpleGrid'>
208 <p>固定された列の見出しは、 <code><th></code> タグに class="ricoFrozen" を持たなければなりません。
209 複合見出し行があるならば、メインの見出し行は "_main" で終わる id を持たなければなりません
210 (これは、リサイズハンドルを表示する行です)。
211 その変換は、テーブルの <code><thead></code> セクションでグリッドの見出しを探します。
212 thead セクションが存在しないなら、その変換はテーブルの最初の行が見出し列であると仮定します。
214 <table id="test1" class="ricoSimpleGrid">
217 <tr id="customer_livegrid_main">
218 <th class="ricoFrozen">ID</th>
219 <th>Customer</th>
220 <th>Address</th>
221 <th>City</th>
226 <!-- grid data -->
231 <p>最後に、SimpleGrid javascript オブジェクトは、CDATA セクションで宣言と初期化が行われなければなりません。
232 ricoInit() の呼び出しは、XSLT 変換によって生成されます。
234 <script type="text/javascript">
237 function ricoInit() {
239 Rico.loadModule('SimpleGrid');
240 Rico.onLoad(ricoInit2);
241 } catch(e) { alert(e.message); }
245 function ricoInit2() {
247 grid1=new Rico.SimpleGrid ('test1',{maxHt:180});
248 } catch(e) { alert(e.message); }
261 var grid = new Rico.SimpleGrid (table_id, grid_options);
264 <ul><li><strong>table_id</strong> は、LiveGrid によって実装されるテーブルの DOM id です
265 <li><strong>grid_options</strong>(下記参照)
273 <dd>グリッドの左側の固定された列の数(デフォルトは 0)
276 <dd>SimpleGrid の高さの最大ピクセル(デフォルトは null)
279 <dd>window.resize イベントでグリッドをリサイズしますか?
280 アコーディオンに埋め込まれる時は false を設定して下さい(デフォルトは true)
282 <dt>useUnformattedColWidth
283 <dd>グリッドの構成時に、html テーブルの列幅を利用しますか?(デフォルトは true)
286 <dd>実際にはスクロールバーの幅を変えず、位置決めで使用されます。(デフォルトは 19)
289 <dd>固定された列の幅がクライアントウィンドウの幅を上回る時、
290 スクロールしている列の幅の合計がどのくらい広がるべきですか?
293 <dd>グリッドで何がハイライトされますか。取り得る値は。
295 <li>cursorRow - カーソルの下のグリッドの行
296 <li>cursorCell - カーソルの下のグリッドのセル
297 <li>menuRow - ユーザがグリッドのコンテキストメニューを開く時に関連のある行
298 <li>menuCell - ユーザがグリッドのコンテキストメニューを開く時に関連のあるセル
299 <li>selection - ユーザによって選択されるセル
300 <li>none - 何もハイライトされない(デフォルト)
304 <dd>ユーザがグリッドからデータをエクスポートする時 window.open() に渡されるオプション文字列。
305 (デフォルトは "height=300,width=500,scrollbars=1,menubar=1,resizable=1")
312 <dd>列のリサイズハンドルに利用される画像(デフォルトは 'resize.gif')
315 <dd>列を昇順でソートする事を示すために使われる画像(デフォルトは 'sort_asc.gif')
318 <dd>列を降順でソートする事を示すために使われる画像(デフォルトは 'sort_desc.gif')
322 <h4>メニューとイベントハンドリングオプション</h4>
326 <dd>ユーザがグリッドのセル上で右クリックした時に取る行動(デフォルトは null)
329 <dd>メニューのトリガーイベント。取り得る値は。
338 <dd>ユーザがグリッドのセル上でシングルクリックした時に取る行動(デフォルトは null)
341 <dd>ユーザがグリッドのセル上でダブルクリックした時に取る行動(デフォルトは null)
349 <dd>グリッドのクッキーに、どの詳細設定を保存するかを指定します。
350 一つのクッキーだけが、それぞれのグリッドのために利用されます。
351 幅の設定が、列の非表示/表示の状態を含む事に注意して下さい。(デフォルトは {width:true, filter:false, sort:false})
354 <dd>クッキー名の先頭に付け加えられる文字列(デフォルトは 'RicoGrid.')
357 <dd>数字の日数前のクッキーは期限切れになります。
358 指定しなければ、クッキーは現在のセッションの間だけ維持されます。(デフォルトは null)
361 <dd>グリッドのクッキーを読む事が出来るトップレベルディレクトリを設定します。
362 指定しなければ、それはクッキーを設定するページのパスになります。(デフォルトは null)
365 <dd>クッキーがどのドメインに送られなければならないかについて、ブラウザに知らせます。
366 指定しなければ、それはクッキーを設定するページのドメインになります。(デフォルトは null)
372 <dt style='font-weight:normal;'>これらのアイテムはそれぞれ、
373 columnSpecs オプションによって、列ごとのベースにオーバーライドする事が出来ます。
376 <dd>列はデフォルトでソート可能ですか?(LiveGrid のデフォルトは true、SimpleGrid のデフォルトは false)
380 (LiveGrid のデフォルトは RicoBuffer.options.canFilter、SimpleGrid のデフォルトは false)
383 <dd>列を 表示/非表示 する事が出来ますか?(デフォルトは true)
386 <dd>ユーザによる列のリサイズを許しますか? (デフォルトは true)
389 <dd>それぞれの列のデフォルトのピクセル幅
395 <dt style='font-weight:normal;'>各々の列のためのオプションは、columnSpecs オプションに含まれます。
396 columnSpecs は、各々の列のためのエントリに関する配列です。
397 各々の列のエントリは、以下のいずれかで行う事が出来ます。
399 <li>null (デフォルト) -- その場合、Rico.TableColumn.DEFAULT. の仕様によって列はフォーマットされます。
400 <li>a string -- あらかじめ定義されたフォーマットの内の一つを定義します:QTY、PERCENT、DOLLAR、または EURO
401 <li>an object -- 下記の表にあるプロパティの一つ以上のエントリを含みます。
403 <p>ここに、列 0、1 と 3 が仕様を含む例を挙げます。
405 columnSpecs : [{noResize:true, ClassName:'alignright'},
406 {ClassName:'aligncenter'},
412 <dd>列を 表示/非表示 する事が出来ます。(デフォルトは grid.options.canHideDefault)
416 grid.options.saveColumnInfo.width が true で、列のためのクッキーに値があるなら、クッキーの値が優先されます。
421 grid.options.saveColumnInfo.width が true で、列のためのクッキーに値があるなら、クッキーの値が優先されます。
422 (デフォルトは grid.options.defaultWidth)
425 <dd>列のリサイズを許しますか?(デフォルトは grid.options.allowColResize)
428 <dd>必要に応じて、これを 'alignright' または 'aligncenter' にセットして下さい - 例を見て下さい。
429 これが見出しを整列しない事に注意して下さい - ヘッダの整列を達成するためには、<th> タグで align="right" を利用して下さい。
430 (デフォルトは table_id + '_col' + column_index)