+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
-<html>\r
-<head>\r
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
-<title>Rico LiveGrid</title>\r
-<link href="ricoDocs.css" rel="Stylesheet" type="text/css" />\r
-</head>\r
-\r
-<body>\r
-<h1>Rico LiveGrid の作成</h1>\r
-\r
-<p>Rico LiveGrid は 2 次元の JavaScript 配列でデータをバッファリングして、スクロールするテーブルにデータを表示します。\r
-ユーザがグリッドを垂直にスクロールする事によって、データは配列からグリッド上へ動的にコピーされます。\r
-バッファは次の項目からロードされる事が出来ます。\r
-<ol>\r
-<li><a href='#model1'>javascript 配列</a>\r
-<li><a href='#model2'>HTML テーブル</a>\r
-<li><a href='#model3'>XML ファイル</a>\r
-<li><a href='#model4'>SQL データベースクエリ</a>\r
-<li><a href='#model5'>カスタム javascript コールバック関数</a>\r
-</ol>\r
-\r
-\r
-<h2><a name='model1'>利用モデル 1: javascript 配列からのデータのロード</a></h2>\r
-\r
-<ul><li>javascript 配列へ表示されるデータをロードして下さい。\r
-<pre>\r
- var myData = [\r
- [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],\r
- [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],\r
- [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],\r
- [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']\r
- ];\r
-</pre>\r
-\r
-<li>グリッドを表示するのに必要な Rico javascript と css ファイルをロードして下さい。\r
-<pre>\r
-Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
-</pre>\r
-<dl>\r
-<dt>LiveGrid\r
-<dd>これは、静的なバッファ（ AJAX では無い）で LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。\r
-<dt>LiveGridMenu\r
-<dd>これは、デフォルトのグリッドメニューをロードします。\r
-このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。\r
-それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。\r
-メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。\r
-<dt>greenHdg.css\r
-<dd>Rico は、いくつかのサンプルグリッドスタイルを持っています。\r
-coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。\r
-あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。\r
-</dl>\r
-\r
-<li>テーブルのデータ列を Rico バッファオブジェクトにロードして下さい。\r
-<pre>\r
- var buffer=new Rico.Buffer.Base();\r
- buffer.loadRowsFromArray(myData);\r
-</pre>\r
-\r
-<li>グリッドの見出しを含む、グリッドのオプションを定義して下さい。\r
-<pre>\r
- var opts = { \r
- useUnformattedColWidth: false,\r
- defaultWidth : 90,\r
- visibleRows : 'data',\r
- frozenColumns: 1,\r
- columnSpecs : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},\r
- {Hdg:'Column 2'},\r
- {Hdg:'Column 3'},\r
- {Hdg:'Column 4'},\r
- {Hdg:'Column 5'}]\r
- };\r
-</pre>\r
-\r
-<li>グリッド、Rico.Buffer インスタンス、およびグリッドオプションのためにベース id を渡して、LiveGrid をインスタンス化してください。\r
-\r
-<pre>\r
- var ex1=new Rico.LiveGrid ('ex1', buffer, opts);\r
-</pre>\r
-\r
-<li>グリッドのためのデフォルトポップアップメニューを利用可能にするために、グリッドのメニューのプロパティを Rico.GridMenu のインスタンスに割り当てて下さい。\r
-\r
-<pre>\r
- ex1.menu=new Rico.GridMenu();\r
-</pre>\r
-\r
-<li>Rico.loadModule は、window.onload イベントの終了<em>後</em>に実行されると思います。\r
-あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。\r
-javascript のすべてをまとめると、このようになります。\r
-<pre>\r
-<script type='text/javascript'>\r
-Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
-\r
-Rico.onLoad( function() {\r
- var myData = [\r
- [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],\r
- [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],\r
- [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],\r
- [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']\r
- ];\r
- var opts = { \r
- useUnformattedColWidth: false,\r
- defaultWidth : 90,\r
- visibleRows : 'data',\r
- frozenColumns: 1,\r
- columnSpecs : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},\r
- {Hdg:'Column 2'},\r
- {Hdg:'Column 3'},\r
- {Hdg:'Column 4'},\r
- {Hdg:'Column 5'}]\r
- };\r
- var buffer=new Rico.Buffer.Base();\r
- buffer.loadRowsFromArray(myData);\r
- var ex1=new Rico.LiveGrid ('ex1', buffer, opts);\r
- ex1.menu=new Rico.GridMenu();\r
-});\r
-</script>\r
-</pre>\r
-\r
-<li>最後に、グリッドを実行すべき位置に、HTML マークアップ に div 要素を配置して下さい。\r
-ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。\r
-<pre>\r
-<p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>\r
-<div id="ex1"></div>\r
-</pre>\r
-\r
-\r
-\r
-</ul>\r
-\r
-\r
-<h2><a name='model2'>利用モデル 2: HTML テーブルからのデータのロード</a></h2>\r
-\r
-<ul><li>見出しは <code><thead></code> セクションにより、データは <code><tbody></code> セクションにより、HTML テーブルを定義して下さい。\r
-ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。\r
-<pre>\r
-<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
-<table id="data_grid">\r
- <thead>\r
-\r
- <tr>\r
- <th>First column name</th>\r
- <th>Second column name</th>\r
- ...\r
- <th>Last column name</th>\r
- </tr>\r
-\r
- </thead>\r
-\r
- <tbody>\r
-\r
- <tr>\r
- <td>Row 1, column 1 data</td>\r
- <td>Row 1, column 2 data</td>\r
- ...\r
- <td>Row 1, last column data</td>\r
- </tr>\r
-\r
- <tr>\r
- <td>Row 2, column 1 data</td>\r
- <td>Row 2, column 2 data</td>\r
- ...\r
- <td>Row 2, last column data</td>\r
- </tr>\r
-\r
- ...\r
-\r
- <tr>\r
- <td>Row n, column 1 data</td>\r
- <td>Row n, column 2 data</td>\r
- ...\r
- <td>Row n, last column data</td>\r
- </tr>\r
-\r
- </tbody>\r
-</table>\r
-</pre>\r
-\r
-<li>グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。\r
-<pre>\r
-Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
-</pre>\r
-<dl>\r
-<dt>LiveGrid\r
-<dd>これは、静的なバッファ（ AJAX では無い）で LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。\r
-<dt>LiveGridMenu\r
-<dd>これは、デフォルトのグリッドメニューをロードします。\r
-このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。\r
-それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。\r
-メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。\r
-<dt>greenHdg.css\r
-<dd>Rico は、いくつかのサンプルグリッドスタイルを持っています。\r
-coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。\r
-あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。\r
-</dl>\r
-\r
-<li>テーブルのデータ列を Rico バッファオブジェクトにロードして下さい。\r
-<pre>\r
-var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);\r
-</pre>\r
-\r
-<li>最後に、HTML テーブルの DOM の id とオプションを Rico.Buffer インスタンス に渡して\r
-（これは、 LiveGrid がテーブルの thead セクションから列の見出しをロードするのを許可します）、\r
-LiveGrid を初期化します\r
-（この場合、最初の列の幅は 50 ピクセル、2 番目の列は 80 ピクセルの幅となります）。\r
-\r
-<pre>\r
-var grid_options = { columnSpecs: [ {width:50}, {width:80} ] };\r
-var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-</pre>\r
-\r
-<li>Rico.loadModule は、window.onload イベントの終了<em>後</em>に実行されると思います。\r
-あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、\r
-なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。\r
-javascript のすべてをまとめると、このようになります。\r
-\r
-<pre>\r
-<script type='text/javascript'>\r
-Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');\r
-\r
-Rico.onLoad( function() {\r
- var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);\r
- var grid_options = { columnSpecs: [width:50, width:80] };\r
- var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-});\r
-</script>\r
-</pre>\r
-\r
-</ul>\r
-\r
-\r
-<h2><a name='model3'>利用モデル 3: XML ファイルからのデータのロード</a></h2>\r
-\r
-<ul><li>テーブルのヘッダセルを持ち、テーブルのボディセルは持たない、HTML テーブルを定義して下さい。\r
-ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。\r
-<pre>\r
-<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
-<table id="data_grid">\r
- <tr>\r
-\r
- <th>First column name</th>\r
- <th>Second column name</th>\r
-\r
- </tr>\r
-</table>\r
-</pre>\r
-\r
-<li>グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。\r
-<pre>\r
-Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
-</pre>\r
-<dl>\r
-<dt>LiveGridAjax\r
-<dd>これは、AJAX 対応のバッファで LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。\r
-<dt>LiveGridMenu\r
-<dd>これは、デフォルトのグリッドメニューをロードします。\r
-このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。\r
-それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。\r
-メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。\r
-<dt>greenHdg.css\r
-<dd>Rico は、いくつかのサンプルグリッドスタイルを持っています。\r
-coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。\r
-あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。\r
-</dl>\r
-\r
-<li>データをフェッチしてテーブルを実装するために、Rico バッファを作成して下さい。\r
-AjaxXML バッファは、グリッドのスタートアップで提供された URL に、一つだけのデータのリクエストを行います。\r
-<pre>\r
-var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');\r
-</pre>\r
-\r
-この URL（実例の中にある "/controller/action?format=xml"）は、次のフォーマットでデータを返さなければなりません。\r
-<pre>\r
-<ajax-response>\r
-<response type='object' id='data_grid_updater'>\r
-<rows update_ui='true' offset='0'>\r
-<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>\r
-<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>\r
-</rows>\r
-</response>\r
-</ajax-response>\r
-</pre>\r
-\r
-<li>最後に、HTML テーブルの DOM の ID とオプションを Rico.Buffer インスタンス に渡して、LiveGrid を初期化します\r
-（columnSpecs は必要ではありませんが、列のカスタム化のためのプレースホルダーとして、ここに表示されます）。\r
-<pre>\r
-var grid_options = { columnSpecs: [,] };\r
-var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-</pre>\r
-\r
-<li>Rico.loadModule は、window.onload イベントの終了<em>後</em>に実行されると思います。\r
-あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、\r
-なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。\r
-javascript のすべてをまとめると、このようになります。\r
-\r
-<pre>\r
-<script type='text/javascript'>\r
-Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
-\r
-Rico.onLoad( function() {\r
- var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');\r
- var grid_options = { columnSpecs: [,] };\r
- var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-});\r
-</script>\r
-</pre>\r
-</ul>\r
-\r
-\r
-<h2><a name='model4'>利用モデル 4: SQL データベースクエリからデータをロードする</a></h2>\r
-\r
-<p>下記の説明は、Rico LiveGrid プラグインにおける ASP と PHP の実装に直接当てはまります。\r
-概念は .net の同じですが、実装方法は全く異なります\r
-(これがどのように .net で実装されるかについては、"ex2simple.aspx" を調べて下さい)。\r
-\r
-<ul>\r
-<li>実行するためにクエリを含むセッション変数を定義して下さい。\r
-変数名は、下の表の ID に適合しなければなりません。\r
-データを要求するとき、グリッドは ricoXMLquery にそのIDを渡します、そして、ricoXMLquery はセッションからクエリテキストを取得するためにそれを利用するでしょう。\r
-<ul>\r
-<li>ASP:\r
-<pre>\r
-<%\r
-session.contents("data_grid")="select ID,Name,City from customers"\r
-%>\r
-</pre>\r
-\r
-<li>PHP:\r
-<pre>\r
-<? \r
-$_SESSION['data_grid']="select ID,Name,City from customers";\r
-?>\r
-</pre>\r
-\r
-<li>.net:\r
-<pre>\r
-Sub Page_Load(Sender As object, e As EventArgs)\r
- data_grid.sqlQuery="select ID,Name,City from customers"\r
- ' session variable is set by the control\r
-End Sub\r
-</pre>\r
-</ul>\r
-\r
-\r
-<li>テーブルのボディセルでは無く、ヘッダセルを供給して、HTML テーブルを定義して下さい。\r
-ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。\r
-<pre>\r
-<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
-<table id="data_grid">\r
- <tr>\r
-\r
- <th>Customer #</th>\r
- <th>Customer Name</th>\r
- <th>City</th>\r
-\r
- </tr>\r
-</table>\r
-</pre>\r
-\r
-<li>グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。\r
-<pre>\r
-Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
-</pre>\r
-<dl>\r
-<dt>LiveGridAjax\r
-<dd>これは、AJAX 対応バッファで LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。\r
-<dt>LiveGridMenu\r
-<dd>これは、デフォルトのグリッドメニューをロードします。\r
-このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。\r
-それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。\r
-メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。\r
-<dt>greenHdg.css\r
-<dd>Rico は、いくつかのサンプルグリッドスタイルを持っています。\r
-coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。\r
-あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。\r
-</dl>\r
-\r
-<li>データをフェッチしてテーブルを実装するために、Rico バッファを作成して下さい。\r
-一度にすべてのデータをグリッドにフェッチする AjaxXML バッファと異なり、 AjaxSQL バッファは、塊でデータをフェッチします。\r
-これは、LiveGrid が能率的に数千または何十万の列を含んでいるクエリ結果を表示する事を可能にします。\r
-\r
-<pre>\r
-var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');\r
-</pre>\r
-\r
-この URL （"ricoXMLquery.asp" の実例で）は、データベースからデータをフェッチして、\r
-この XML フォーマットでグリッドにそれを戻すために、含まれるプラグインの内の 1 つを利用します。\r
-\r
-<pre>\r
-<ajax-response>\r
-<response type='object' id='data_grid_updater'>\r
-<rows update_ui='true' offset='0'>\r
-<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>\r
-<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>\r
-</rows>\r
-<rowcount>99</rowcount>\r
-</response>\r
-</ajax-response>\r
-</pre>\r
-\r
-<rowcount> タグはオプションですが、リクエストに "get_total" クエリーストリングパラメータが存在する場合は、\r
-いつでも返されなければなりません。\r
-\r
-<li>最後に、HTML テーブルの DOM の ID とオプションを Rico.Buffer インスタンス に渡して、LiveGrid を初期化します\r
-（columnSpecs は必要ではありませんが、列のカスタム化のためのプレースホルダーとして、ここに表示されます）。\r
-<pre>\r
-var grid_options = { columnSpecs: [,,] };\r
-var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-</pre>\r
-\r
-<li>Rico.loadModule は、window.onload イベントの終了<em>後</em>に実行されると思います。\r
-あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、\r
-なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。\r
-javascript のすべてをまとめると、このようになります。\r
-<pre>\r
-<script type='text/javascript'>\r
-Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');\r
-\r
-Rico.onLoad( function() {\r
- var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');\r
- var grid_options = { columnSpecs: [,,] };\r
- var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);\r
-});\r
-</script>\r
-</pre>\r
-</ul>\r
-\r
-\r
-<h2><a name='model5'>利用モデル 5: カスタムコールバック関数を利用してデータをロードする</a></h2>\r
-\r
-<p>このモデルは、 xmlHTTPrequest を利用してデータをフェッチするのでは無く、 javascript コールバック関数を\r
-利用してデータをフェッチする事以外はモデル 3 や 4 と同じ方法で動作します。\r
-これにより、コールバック関数で Google Gears を呼ぶような創造的な事をすることが出来ます。\r
-コールバックをセットアップする事は、非常に簡単です。\r
-データプロバイダの URL の文字列を含むデータを AjaxXML または AjaxSQL コンストラクタに渡すのでは無く、\r
-その代りにコールバック関数を渡すだけです。\r
-\r
-<p>以下の AjaxXML バッファを利用するコードは <a href='client/gridJSbuffer.html'>examples/client/gridJSbuffer.html</a> から取得出来ます。\r
-"jsfetch" コールバック関数は 100 行の長さで 5 列の幅の二次元配列を返します。\r
-AjaxXML は、そのバッファを（グリッドのスタートアップで）一度だけロードするので、 jsfetch は一度だけ呼ばれます。\r
-このオプションのハッシュは、Prototype の Ajax.Request メソッドで利用されるオプションのハッシュと構造が同じです。\r
-\r
-<pre>\r
-buffer=new Rico.Buffer.AjaxXML(<strong>jsfetch</strong>);\r
-\r
-function <strong>jsfetch</strong>(options) {\r
- Rico.writeDebugMsg("jsfetch");\r
- var newRows=[], offset=options.parameters.offset;\r
- for (var r=0; r<100; r++) {\r
- var row=[];\r
- row.push(offset.toString());\r
- row.push(new Date().toString());\r
- for (var c=2; c<5; c++) row.push('cell '+r+':'+c);\r
- newRows.push(row);\r
- }\r
- options.onComplete(newRows);\r
-}\r
-</pre>\r
-\r
-<p>以下の AjaxSQL バッファを利用するコードは <a href='client/gridJSbuffer2.html'>examples/client/gridJSbuffer2.html</a> から取得出来ます。\r
-"jsfetch" コールバック関数は、500 行の長さで 5 列の幅の二次元配列をシミュレーションします。\r
-しかし、どんなコールバック中でも、その配列の <code>options.parameters.offset</code> 行から \r
-<code>options.parameters.offset + options.parameters.page_size</code> 行までのセクションが返されます。\r
-\r
-<pre>\r
-buffer=new Rico.Buffer.AjaxSQL(<strong>jsfetch</strong>);\r
-\r
-function <strong>jsfetch</strong>(options) {\r
- var newRows=[], totrows=500;\r
- var offset=options.parameters.offset;\r
- var limit=Math.min(totrows-offset,options.parameters.page_size)\r
- for (var r=0; r<limit; r++) {\r
- var row=[];\r
- row.push(new Date().toString());\r
- row.push(offset.toString());\r
- for (var c=2; c<5; c++) row.push('cell '+(r+offset)+':'+c);\r
- newRows.push(row);\r
- }\r
- options.onComplete(newRows,false,totrows);\r
-}\r
-</pre>\r
-\r
-<p>options.onComplete は、次のパラメータをとります。\r
-<ul>\r
-<li>newRows - それぞれのアイテムが文字列の二次元配列\r
-<li>newAttr - それぞれのアイテムが、セルの acceptAttr の値、または acceptAttr が利用されていないなら false を含むオブジェクトの二次元配列\r
-<li>totalRows - データセット内の行の総数を表す整数\r
-<li>errMsg - エラーが起こったとき、ユーザに表示されるメッセージテキスト\r
-</ul>\r
-\r
-</ul>\r
-\r
-\r
-<h2><a name='debug'></a>デバッグ</h2>\r
-<p>Rico 2.0 はメッセージログにタイムスタンプデバッグメッセージを配達する能力を持っています。\r
-そのログは、HTML のテキストエリアか、ブラウザの javascript コンソールに表示されるでしょう。\r
-<ul>\r
-<li>もし、テキストエリアが '_debugmsgs' を加えたライブグリッドテーブルの ID と共に存在するならば、例えば\r
-<pre style='margin:3px;'><textarea cols="100" rows="5" id="data_grid_debugmsgs" /></pre>\r
-そして、このテキストエリアがメッセージログのために使われます。\r
-<li>あるいは、テキストエリアは Rico.setDebugArea() の呼び出しによって指定されるかもしれません。\r
-\r
-<pre>\r
-<textarea id='debug' rows='5' cols='80'></textarea>\r
-<script type='text/javascript'>\r
-Rico.setDebugArea('debug');\r
-</script>\r
-</pre>\r
-\r
-<li>テキストエリアが指定されないならば、Rico はブラウザのビルトイン javascript コンソールを使おうとします。\r
-以下のコンソールで動作する事が知られています:\r
- <ul>\r
- <li>Firefox の <a href='http://www.getfirebug.com/' target='_blank'>Firebug</a> アドオンコンソール\r
- <li>Opera javascript コンソール\r
- <li>Safari javascript コンソール\r
- </ul>\r
-</ul>\r
-\r
-<h2>グリッドメニュー</h2>\r
-\r
-<p>Rico LiveGrid は、多くの機能的なビルトインが付属します\r
-その機能にアクセスするために、Rico はメニューのデフォルトの設定を含みます -- \r
-ricoLiveGridMenu.js で定義されています。\r
-デフォルトメニューを使うために、単に 'LiveGridMenu' モジュールをロードして、\r
-そのグリッドメニュープロパティを Rico.GridMenu クラスのインスタンスに割り当てて下さい。\r
-<pre>\r
- Rico.loadModule('LiveGridMenu');\r
- ...\r
- var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
- ex1.menu=new Rico.GridMenu();\r
-</pre>\r
-<p>デフォルトでは、ユーザがグリッドセルをダブルクリックする時メニューが開きます。\r
-メニューを開くイベントを変更するために、グリッドの <a href='#menuEvent'>menuEvent</a> \r
-オプションに値を割り当てて下さい。\r
-以下のコードは、右クリックでメニューを開きます。\r
-<pre>\r
- Rico.loadModule('LiveGridMenu');\r
- ...\r
- var grid_options = {\r
- menuEvent: 'contextmenu'\r
- }\r
- var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
- ex1.menu=new Rico.GridMenu();\r
-</pre>\r
-<p>Rico.GridMenu は、更なるメニューアイテムを追加するために、コールバック（dataMenuHandler）を提供します。\r
-グリッドメニューは常に動的に構築されます -- ユーザーがクリックした行と列のためにカスタマイズされます。\r
-コールバック関数が毎回呼ばれるように、メニューは起動されて、\r
-それぞれの起動で要求されるメニューアイテムを加えなければなりません。\r
-<pre>\r
- Rico.loadModule('LiveGridMenu');\r
- ...\r
- var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);\r
- ex1.menu=new Rico.GridMenu();\r
- ex1.menu.options.dataMenuHandler=myCustomMenuItems;\r
- ...\r
-function myCustomMenuItems(grid,r,c,onBlankRow) {\r
- if (buffer.getWindowValue(r,c)=='Special Value')\r
- grid.menu.addMenuItem("Special menu item", specialAction);\r
-}\r
-function specialAction() {\r
- ...\r
-}\r
-</pre>\r
-\r
-<p>完全なカスタムメニューを作成する事も可能です。\r
-例えば、ex5.php/asp/aspx を見て下さい。\r
-\r
-\r
-<h2>注意</h2>\r
-<ul>\r
-<li>もし、ライブグリッドテーブル名に '_bookmark' が追加された名前に、DOM の ID が一致する要素を作成するなら、\r
-グリッドに表示されいるレコードの数を示しているテキストが更新されるでしょう。\r
-LiveGrid の実例は、一般的にこのマークアップを使います。\r
-<pre>\r
-<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>\r
-</pre>\r
-<li>ライブグリッドを表示するブラウザは、<a href="http://www.quirksmode.org/css/quirksmode.html">strict （別名 "標準" ）モード</a> で実行されていなければなりません。\r
-したがって、あなたは <code> <html> </code> タグの直前に doctype の宣言を含めなければなりません。例えば\r
-\r
-<pre>\r
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" \r
- "http://www.w3.org/TR/html4/strict.dtd">\r
-</pre>\r
-</ul>\r
-\r
-<h2>リファレンス</h2>\r
-<h3>コンストラクタ</h3>\r
-<pre>\r
-\r
- var grid = new Rico.LiveGrid (table_id, rico_buffer, grid_options);\r
-\r
-</pre>\r
-\r
-<ul>\r
-<li><strong>table_id</strong> はライブグリッドによって実装される、テーブルの DOM id です\r
-<li><strong>rico_buffer</strong> は Rico のバッファです、例えば\r
- <ul>\r
- <li>Rico.Buffer.Base （AJAX 対応では無いテーブルのために）\r
- <li>Rico.Buffer.AjaxXML\r
- <li>Rico.Buffer.AjaxSQL\r
- </ul>\r
-<li><strong>grid_options</strong> （下記参照）\r
-</ul>\r
-\r
-<h3><a name="options"></a>オプション</h3>\r
-\r
-<h4>グリッドサイズ</h4>\r
-<dl>\r
-<dt>visibleRows （.net の行）\r
-<dd>グリッドに何行表示しますか？\r
-正の整数は、グリッドが正確に多くの行を常に含まなければならないことを示しています。\r
-負の値は、以下の意味を持ちます。\r
- <ul>\r
- <li>-1: クライアントウィンドウに合わせたグリッドサイズ（デフォルト）\r
- <li>-2: クライアントウィンドウとデータの小さい方のグリッドサイズ\r
- <li>-3: ページのボディにスクロールバーを持たないためのグリッドサイズ\r
- <li>-4: DOM の親ノードによるグリッドサイズ\r
- </ul>\r
- \r
-<dt>minPageRows\r
-<dd>表示される行数の最小値。visibleRows が 0 以下の時のみ利用される。（Rico 2b3 からはデフォルトが 2 で、Rico 2b3 までは 1）\r
-\r
-<dt>maxPageRows\r
-<dd>表示される行数の最大値。visibleRows が 0 以下の時のみ利用される。（デフォルトは 50）\r
-\r
-<dt>defaultWidth\r
-<dd>列の初期幅を設定する際に使われる整数。\r
-説明については <a href='#width'>列幅オプション</a> を見て下さい。\r
-（デフォルトは 100）\r
-\r
-<dt>useUnformattedColWidth\r
-<dd>列の初期幅を設定する際に使われる真偽値。\r
-説明については <a href='#width'>列幅オプション</a> を見て下さい。\r
-（デフォルトは true）\r
-\r
-<dt>scrollBarWidth\r
-<dd>いくらかの計算のために、LiveGrid はページ上のスクロールバーの幅を知っている必要があります。（デフォルトは 19）\r
-\r
-<dt>minScrollWidth\r
-<dd>固定された列の幅がウィンドウ幅を上回る時の、スクロールエリアのピクセル幅の最小値。（デフォルトは 100）\r
-</dl>\r
-\r
-\r
-<h4>グリッドデータ</h4>\r
-<dl>\r
-<dt>offset<dd>表示されるデータの最初の行（デフォルトは 0）\r
-<dt>prefetchBuffer<dd>ページのロード時にバッファの（そして、その結果グリッドの）ロードを行いますか？\r
-<dt>sortCol<dd>初期ソートのための、列の名前かインデックス\r
-<dt>sortDir<dd>初期ソートの方向\r
- <br>取り得る値は 'ASC'、'DESC'\r
-<dt>getQueryParms<dd>もし true なら、フィルタパラメータのための、そのウェブページのクエリ文字列をチェックし、そして見つかるどんなフィルタでも適用します。\r
-フィルタパラメータは "f[x]=" の形でなければならず、"x" は列のインデックスです。（デフォルトは false ）\r
-</dl>\r
-\r
-<h4>ヘッダ構成</h4>\r
-<dl>\r
-<dt>frozenColumns\r
-<dd>グリッドの左側の固定された列の数（Excel のように）\r
-\r
-<dt>headingSort\r
-<dd>ソートを容易にするために、どのように見出しが表示されるかを定義する文字列。\r
- <ul>\r
- <li>'link' -- 見出しに列をソートしてくれるリンクを作成します（デフォルト）\r
- <li>'hover' -- ユーザは、ソートするために、見出しのセルのどんな部分でもクリックする事が出来ます。カーソルがセル上でホバーする時、見出しは背景色を変えます。\r
- <li>'none' -- 見出し上のイベントは利用不能です。\r
- </ul>\r
-\r
-<dt>hdrIconsFirst<dd>見出しの前後に、ソートとフィルタのアイコンを置きます（デフォルトは true）\r
-\r
-<dt><a name='allowColResize'>allowColResize</a><dd>ユーザによる列のリサイズを許しますか？\r
-true なら、個々の列のリサイズを利用不能にするために columnSpecs の <a href='#noResize'>noResize</a> を利用します。\r
-\r
-<dt>panels<dd>第二の見出しとして用いる事が出来る文字列の配列です。\r
-LiveGrid Forms で、入力フォーム上のタブを付けられたパネルのための見出しを提供します。\r
-\r
-<dt>PanelNamesOnTabHdr<dd>panels[] の文字列を第二の見出しとして利用するために 'true' を設定します。\r
-LiveGrid Forms では、 panels[] は入力フォームとしてのみ利用されるので、'false' が設定されるでしょう。\r
-\r
-<dt><a name='FilterLocation'></a>FilterLocation\r
-<dd>フィルタを設置する見出しの行を指定します。\r
--1 は、新しい行をヘッダに追加し、新しい行がフィルタリングのために利用されるようにします。\r
-<a href='#filterUI'>filterUI</a> のオプションも見て下さい。\r
-\r
-<dt>FilterAllToken\r
-<dd>選択フィルタで "show all values" を示すトークン（デフォルトは "___ALL___"）。\r
-</dl>\r
-\r
-<h4>画像</h4>\r
-<dl>\r
-<dt>resizeBackground\r
-<dd>列のリサイズハンドルに利用される画像（デフォルトは 'resize.gif'）\r
-\r
-<dt>sortAscendImg\r
-<dd>列を昇順でソートする事を示すために使われる画像（デフォルトは 'sort_asc.gif'）\r
-\r
-<dt>sortDescendImg\r
-<dd>列を降順でソートする事を示すために使われる画像（デフォルトは 'sort_desc.gif'）\r
-\r
-<dt>filterImg\r
-<dd>列に対し現在利用中のフィルタを示すために使われる画像（デフォルトは 'filtercol.gif'）\r
-</dl>\r
-\r
-\r
-<h4>クッキーオプション</h4>\r
-<dl>\r
-\r
-<dt>saveColumnInfo\r
-<dd>グリッドのクッキーに、どの詳細設定を保存するかを指定します。\r
-一つのクッキーだけが、それぞれのグリッドのために利用されます。\r
-幅の設定が、列の非表示／表示の状態を含む事に注意して下さい。\r
-（デフォルトは {width:true, filter:false, sort:false}）\r
-<br>.netプラグインでは、このオプションは、3 つの別々のプロパティによって表現されます。\r
-saveColumnWidth、saveColumnFilter、saveColumnSort。\r
-\r
-<dt>cookiePrefix\r
-<dd>クッキー名の先頭に付け加えられる文字列（デフォルトは 'RicoGrid.'）\r
-\r
-<dt>cookieDays\r
-<dd>数字の日数前のクッキーは期限切れになります。\r
-指定しなければ、クッキーは現在のセッションの間だけ維持されます。（デフォルトは null）\r
-\r
-<dt>cookiePath\r
-<dd>グリッドのクッキーを読む事が出来るトップレベルディレクトリを設定します。\r
-指定しなければ、それはクッキーを設定するページのパスになります。（デフォルトは null）\r
-\r
-<dt>cookieDomain\r
-<dd>クッキーがどのドメインに送られなければならないかについて、ブラウザに知らせます。\r
-指定しなければ、それはクッキーを設定するページのドメインになります。（デフォルトは null）\r
-\r
-</dl>\r
-\r
-<h4>ハイライティングとセレクション</h4>\r
-<dl>\r
-\r
-<dt>highlightElem\r
-<dd>何がハイライトまたは選択されるかについて指定する文字列。\r
- <ul>\r
- <li>'cursorRow' -- the grid row under the cursor\r
- <li>'cursorCell' -- the grid cell under the cursor\r
- <li>'menuRow' -- the grid row where the menu is displayed\r
- <li>'menuCell' -- the grid cell where the menu is displayed\r
- <li>'selection' -- allow the user to select cells\r
- <li>'none' -- never highlight\r
- </ul>\r
-\r
-<dt>highlightSection\r
-<dd>テーブルのどのセレクションがハイライトされるかについて指定する整数\r
- <ul>\r
- <li>1 -- 固定された部分\r
- <li>2 -- スクロールする部分\r
- <li>3 -- すべて（デフォルト）\r
- <li>0 -- 無し\r
- </ul>\r
-<dt>highlightMethod\r
-<dd>セルや行がハイライトされる方法。取り得る値は\r
- <ul>\r
- <li>'outline' -- クライアント側で、最も CPU 集約型では無い\r
- <li>'class' -- ハイライトされた セル／行 のCSS クラスを追加（デフォルト）\r
- <li>'both' -- アウトラインとクラスの両方を利用するハイライト\r
- </ul>\r
-<dt>highlightClass\r
-<dd>クラスによってハイライトされる時、クラス名として利用されます（デフォルトは 'ricoLG_selection'）\r
-</dl>\r
-\r
-<h4>エクスポートと印刷</h4>\r
-<dl>\r
-<dt>maxPrint\r
-<dd>ユーザに 印刷／エクスポート を許す最大行数。\r
-印刷／エクスポート を利用不能にするには 0 を設定します。（デフォルトは 1000）\r
-\r
-<dt>exportWindow\r
-<dd>エクスポートウィンドウが生成される時に、\r
-<a href='http://www.w3schools.com/htmldom/met_win_open.asp'>window.open()</a> に渡されるオプション文字列。\r
-（デフォルトは "height=400,width=500,scrollbars=1,menubar=1,resizable=1"）\r
-</dl>\r
-\r
-<h4>イベントコントロール</h4>\r
-<dl>\r
-<dt><a name='menuEvent'></a>menuEvent\r
-<dd>グリッドメニューがいつ呼び出されるべきかを指定する文字列\r
- <ul>\r
- <li>'click' -- シングルクリックでメニューを呼び出す\r
- <li>'dblclick' -- ダブルクリックでメニューを呼び出す（デフォルト）\r
- <li>'contextmenu' -- 右クリックでメニューを呼び出す\r
- <li>'none' -- メニューをポップアップしない\r
- </ul>\r
-\r
-<dt>windowResize\r
-<dd>window.resize イベントの間にグリッドの大きさを変更するかどうかを指定する真偽値？\r
-グリッドがアコーディオンに組み込まれる時に、これに false が設定されなくてはなりません。（デフォルトは true）\r
-</dl>\r
-\r
-<h4>イベントハンドル</h4>\r
-<dl>\r
-<p>コンストラクタにオプションでイベントハンドラを渡す事は出来ませんが、LiveGrid が生成された後なら、設定されるかも知れません。</p>\r
-<dt>sortHandler<dd> （デフォルトは Rico.LiveGridMethods.sortHandler -- バインドされた）\r
-<dt>filterHandler<dd> （デフォルトは Rico.LiveGridMethods.filterHandler -- バインドされた）\r
-<dt>onRefreshComplete<dd> （デフォルトは Rico.LiveGridMethods.bookmarkHandler -- バインドされた）\r
-<dt>rowOverHandler<dd> （デフォルトは Rico.LiveGridMethods.rowMouseOver -- イベントリスナーとしてバインドされた）\r
-<dt>mouseDownHandler<dd> （デフォルトは Rico.LiveGridMethods.selectMouseDown -- イベントリスナーとしてバインドされた）\r
-<dt>mouseOverHandler<dd>（デフォルトは Rico.LiveGridMethods.selectMouseOver -- イベントリスナーとしてバインドされた）\r
-<dt>mouseUpHandler<dd> （デフォルトは Rico.LiveGridMethods.selectMouseUp -- イベントリスナーとしてバインドされた）\r
-<dt>onscroll<dd> グリッドが垂直にスクロールされる時は、いつでも呼ばれます。（デフォルトは null）\r
-<dt>onscrollidle<dd> グリッドが垂直にスクロールされた 1、2 秒後に呼ばれます。（デフォルトは null）\r
-<dt>click<dd> グリッドセルがクリックされた時に呼ばれます。（デフォルトは menuEvent='click' で無ければ null）\r
-<dt>dblclick<dd> グリッドセルがダブルクリックされた時に呼ばれます。（デフォルトは menuEvent='dblclick' で無ければ null）\r
-<dt>contextmenu<dd> グリッドセルが右クリックされた時に呼ばれます。（デフォルトは menuEvent='contextmenu' で無ければ null）\r
-</dl>\r
-\r
-<h4><a name="column"></a>列ごとの構成</h4>\r
-<dl>\r
-<p>各々の列のためのオプションは、columnSpecs オプションに含まれます。\r
-columnSpecs は、各々の列のためのエントリに関する配列です。\r
-各々の列のエントリは、以下のいずれかで行う事が出来ます。\r
-<ul>\r
-\r
-<li>null （デフォルト） -- その場合、Rico.TableColumn.DEFAULT. の仕様によって列はフォーマットされます。\r
-グリッドの多くの列が共通のフォーマットを共有するならば、グリッドのデフォルト列仕様をオーバーライドする事は意味があるかもしれません。\r
-<pre>\r
-Rico.TableColumn.DEFAULT = {ClassName:'aligncenter', width:50};\r
-</pre>\r
-この場合は、仕様の無いどんな列でも、整列は中央で幅は 50 ピクセルの内容を持ちます。\r
-\r
-<li>a string -- 列のフォーマットを指定する単純な方法を提供します。\r
-DOLLAR、EURO、PERCENT、QTY、DEFAULT の値がビルトインされています。\r
-独自のものを定めることも可能です。\r
-温度フォーマットを定義したこの例は、weather.php から取得されます\r
-\r
-<pre>\r
-Rico.TableColumn.TEMP = {type:'number', decPlaces:0, \r
- ClassName:'alignright', suffix:'&deg;C', width:50};\r
-var opts = { \r
- frozenColumns : 1,\r
- columnSpecs : [{width:120},{width:70},{width:70},{width:100},\r
- 'TEMP','TEMP','TEMP',\r
- {width:150},{width:200},{width:60}]\r
-};\r
-</pre>\r
-\r
-<li>an object -- 下記の表にあるプロパティの一つ以上のエントリを含む。\r
-ここに、列 0、1 と 3 が仕様を含む例を挙げます。\r
-列 2 はデフォルトの仕様を取得します。\r
-<pre>\r
-columnSpecs : [{canSort:false, noResize:true, ClassName:'alignright'},\r
- {ClassName:'aligncenter'},\r
- ,\r
- {visible:false}]\r
-</pre>\r
-</ul>\r
-\r
-<dt>Hdg\r
-<dd>列の見出しテキストを指定する代わりの方法。\r
-グリッド ID が、html テーブルの代わりに <div> を参照するなら、LiveGrid によってのみ利用されます。\r
-\r
-<dt>canSort\r
-<dd>列をソートする事が出来ます。（デフォルトは grid.options.canSortDefault）\r
-\r
-<dt>canFilter\r
-<dd>列をフィルタする事が出来ます。（デフォルトは grid.options.canFilterDefault）\r
-\r
-<dt>canDrag\r
-<dd>列のセルは、ドラッグアンドドロップオペレーションのソースとして用いられる事が出来ます。\r
-"DragAndDrop" モジュールはロードされなければなりません。\r
-一時的なドラッグオブジェクトは "LiveGridDraggable" クラスが持ちます。\r
-実例として、<a href='client/drag_and_drop_grid.html'>drag_and_drop_grid.html</a> を見て下さい。（デフォルトは false）\r
-\r
-<dt>canHide\r
-<dd>列を 表示／非表示 する事が出来ます。（デフォルトは grid.options.canHideDefault）\r
-\r
-<dt>visible\r
-<dd>列は、初めは隠されていません。\r
-grid.options.saveColumnInfo.width が true で、列のためのクッキーに値があるなら、クッキーの値が優先されます。\r
-（デフォルトは true）\r
-\r
-<dt><a name='width'></a>width\r
-<dd>列の初期幅（ピクセルで）を指定する整数。\r
-ここに、それぞれの列の初期幅を設定するために LiveGrid が利用するアルゴリズムがあります。\r
-<ol>\r
-<li>options.saveColumnInfo.width が true で、列情報がグリッドのクッキーに存在する場合は\r
-（以前にグリッドの列の上でリサイズを実行したユーザのために）\r
-クッキーのその幅が利用されます。\r
-そうでない場合は、、、\r
-\r
-<li>options.columnSpecs に列の幅仕様があれば、その幅仕様が利用されます。一例として、 ex3.php/asp/aspx を見て下さい。そうでない場合は、、、\r
-\r
-<li>options.useUnformattedColWidth が true で（デフォルト）、グリッドヘッダが html テーブルから初期化されるならば、htmlテーブルの列の幅が利用されます。\r
-通常 col タグを用いて初期テーブルの列幅をコントロールする事が出来ます。(例えば <col style='width:40px;' >)。\r
-\r
-テーブル幅全体がブラウザー幅より小さいならば、これは動作します。\r
-しかし、それがより大きいならば、ブラウザはしばしば "col width" を無視して、全ての列を利用できるウインドウ幅の中に押し込もうとします。\r
-このように、列幅を設定するためにこの方法を使用することは信頼出来ません。\r
-そうでない場合は、、、\r
-\r
-<li>options.useUnformattedColWidth が false ならば、列の幅は options.defaultWidth により設定されます。（デフォルトは 100）\r
-</ol>\r
-したがって、列幅を LiveGrid と SimpleGrid で設定する最も信頼できる方法は、options.columnSpecs[] ですべての列に幅を指定することになります。 \r
-多くの列が共通の幅を共有するならば、options.useUnformattedColWidth=false を設定して、options.defaultWidth を共通の幅に設定する事によって、\r
-いくらかの近道をする事が出来ます。\r
-\r
-<dt><a name='noResize'>noResize</a>\r
-<dd>列のリサイズを許しますか？（デフォルトは <a href='#allowColResize'>grid.options.allowColResize</a>）\r
-\r
-<dt>ClassName\r
-<dd>デフォルトでは、LiveGrid はユニークな CSS クラス名を、table_id + '_col' + column_index の命名規約に従い、それぞれの列に割り当てます。\r
-例えば、グリッド 'mygrid' の第 4 列は、クラス名 'mygrid_col3' を持ちます。\r
-ClassName オプションの値は、このデフォルト名をオーバーライドします。\r
-ClassName オプションは、Rico が提供する 'alignright' と 'aligncenter' クラスによって列の整列を指定するために、最も一般的に用いられます。\r
-なので、グリッドの最初の 3 つの列が赤い背景色に白いテキストで表示されることを望むならば、あなたは以下のどちらでもすることが出来ます。\r
-\r
-<pre>\r
-In CSS:\r
-.mygrid_col0 div.ricoLG_cell, \r
-.mygrid_col1 div.ricoLG_cell, \r
-.mygrid_col2 div.ricoLG_cell {\r
- color: white;\r
- background-color: red;\r
-}\r
-</pre>\r
-\r
-または\r
-\r
-<pre>\r
-In CSS:\r
-.WhiteOnRed div.ricoLG_cell {\r
- color: white;\r
- background-color: red;\r
-}\r
-\r
-In javascript:\r
-columnSpecs : [{ClassName:'WhiteOnRed'},\r
- {ClassName:'WhiteOnRed'},\r
- {ClassName:'WhiteOnRed'},\r
- ...\r
-</pre>\r
-\r
-最後に、この ClassName がグリッドの見出しに適用されない点に注意してください - \r
-ヘッダの整列を達成するためには、<th> タグで align="right" を利用して下さい。\r
-\r
-<dt>type\r
-<dd>これらの値の内の一つを含む文字列。\r
-<ul>\r
-<li>text - 列の値のどんなタグでも、ユーザに表示される前に取り除かれます。\r
-<li>showTags - 列の値のどんなタグでも、ユーザにテキストとして表示されます。\r
-<li>number - 列の値は数として扱われ、列仕様で与えられるどんな <a href='#NumberFormatting'>number formatting options</a> でも適用されます。\r
-<li>datetime - 列の値は 日付 & 時間 として扱われ、列仕様で与えられるどんな <a href='#DateFormatting'>date formatting options</a> でも適用されます。\r
-<li>UTCasLocalTime - 列やデータベースの値は GMT/UTC 日付 & 時間 として扱われ、列仕様で与えられるどんな <a href='#DateFormatting'>date formatting options</a> でも適用されます。\r
-表示される前に、その値はユーザのローカルタイムゾーンに変換されます。\r
-<li>date - 列の値は日付として扱われ、列仕様で与えられるどんな <a href='#DateFormatting'>date formatting options</a> でも適用されます。\r
-<li>raw (default) - 列の値は、グリッドのセルに直接表示されます。どんなHTMLマークアップでもセルにコピーされます。\r
-</ul>\r
-</dd>\r
-\r
-<dt><a name='control'></a>コントロール\r
-<dd>特別なフォーマットを列に提供するのに用いられるオブジェクト。\r
-いくつかの列コントロールは LiveGrid により提供されます。\r
-それらのためのコードは、 ricoLiveGridControls.js にあります。\r
-ここに、提供されるコントロールの簡潔な記述があります。\r
-\r
-<dl style='font-size:smaller;'>\r
-<dt>Rico.TableColumn.checkboxKey(showKey)\r
-<dd> <checkbox> <key value> として列のユニークキーを表示し、どのキーがユーザによって選択されているかを見逃しません。\r
-キーの値は <、 >、 または & を含むべきではありません。\r
-\r
-<dt>Rico.TableColumn.checkbox(checkedValue, uncheckedValue, defaultValue, readOnly)\r
-<dd>チェックボックスとして列を表示します。データベースの列は、二つの値のみを含まなければなりません（例えば yes/no）。\r
-以下のコードは、ex7 から取得されます（列の値は 1 と 0）。\r
-<pre>\r
-columnSpecs: [{canHide:false,\r
- control:new Rico.TableColumn.checkbox('1','0'),\r
- ClassName:'aligncenter'},\r
- 'specQty'],\r
-</pre>\r
-\r
-<dt>Rico.TableColumn.textbox(boxSize, boxMaxLen, readOnly)\r
-<dd>テキストボックス内に列の値を表示します。\r
-\r
-<dt>Rico.TableColumn.HighlightCell(chkcol,chkval,highlightColor,highlightBackground)\r
-<dd>特定の値が指定された列に存在する時、グリッドのセルをハイライトします。\r
-以下のコードは ex2highlight から取得され、列 1 が "HANAR" を含む時、行全体をハイライトします。\r
-<pre>\r
-var CustId='HANAR';\r
-var CustIdCol=1;\r
-var highlight=Rico.TableColumn.HighlightCell;\r
-...\r
-columnSpecs: [\r
-{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') },\r
-{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') }]\r
-</pre>\r
-\r
-<dt>Rico.TableColumn.bgColor()\r
-<dd>データベースの値が css カラーの名前や値を含みます。\r
-\r
-<dt>Rico.TableColumn.link(href,target)\r
-<dd>データベースの値が、他のページへの URL を含みます。\r
-href パラメータは、文字列に "{x}" を含む事により、グリッドの値への参照を含むかもしれません。 x は列の番号です。\r
-以下のコードは ex6 から取得されます。\r
-<pre>\r
-columnSpecs: [,\r
-{control:new Rico.TableColumn.link('ex2.asp?id={0}','_blank'),\r
- width:250},\r
-,'specQty']\r
-</pre>\r
-\r
-<dt>Rico.TableColumn.image()\r
-<dd>データベースの値が画像への url を含みます。\r
-以下のコードは photos.php から取得されます。\r
-<pre>\r
-imgctl=new Rico.TableColumn.image();\r
-...\r
-columnSpecs: [\r
-{control:imgctl,width:90},,,\r
-{type:'datetime'},{width:200}]\r
-</pre>\r
-\r
-<dt>Rico.TableColumn.lookup(map, defaultCode, defaultDesc)\r
-<dd>データベースの値を表示される値にマップします。\r
-</dl>\r
-\r
-<br>アプリケーション特有のロジックを実装する、独自の列コントロールを書く事も可能です。\r
-ここに例があります。\r
-<pre>\r
-// Display values white on black if\r
-// first column contains the value "reverse"\r
-// Usage: { control:new MyCustomColumn() }\r
-MyCustomColumn = Class.create();\r
-\r
-MyCustomColumn.prototype = {\r
- initialize: function() {},\r
-\r
- _clear: function(gridCell,windowRow) {\r
- gridCell.style.color='';\r
- gridCell.style.backgroundColor='';\r
- gridCell.innerHTML='&nbsp;';\r
- },\r
-\r
- _display: function(v,gridCell,windowRow) {\r
- var col0=this.liveGrid.buffer.getWindowValue(windowRow,0);\r
- if (col0=="reverse") {\r
- gridCell.style.color='white';\r
- gridCell.style.backgroundColor='black';\r
- } else {\r
- gridCell.style.color='';\r
- gridCell.style.backgroundColor='';\r
- }\r
- gridCell.innerHTML=this._format(v);\r
- }\r
-}\r
-</pre>\r
-\r
-<dt><a name='filterUI'></a>filterUI\r
-<dd><a href='#FilterLocation'>FilterLocation</a> オプションがグリッドに指定されるならば、filterUI はそれぞれの列がどのようにフィルタされるかについてコントロールします。\r
-もし filterUI が、\r
-<ul>\r
-<li>null または省略されたら、列にはフィルタが表示されません。\r
-<li>'t' - テキストボックスフィルタを生成し、レコードはユーザのキーボードからの入力によってフィルタされて表示されます。\r
-<br>任意に後につくキャレット（^）は、テキストボックスの値が列の値の始めに一致すべき事を示します。\r
-そうでない場合は、列の値のどこにでも一致します。\r
-<br>任意に後につく数値はテキストボックスの数値を意味します（デフォルトのサイズは 10）\r
-<pre>\r
-filterUI:'t^20' \r
-// will create a text box that is 20 characters wide\r
-// text typed into the box will be compared to\r
-// the beginning of each column value\r
-</pre>\r
-<li>'s' - リストに含む事の出来るすべての列の値と共にセレクトリストフィルタを生成します。\r
-グリッドのソースが SQL クエリなら、'select distinct' クエリを利用して実装されます。\r
-<ul>\r
-</dl>\r
-\r
-<dl>\r
-<a name='NumberFormatting'></a>\r
-<p><em>数値フォーマット：</em></p>\r
-\r
-<dt>multiplier\r
-<dd>表示される前に、その値はこの数値によって乗算されます。（デフォルトは 1）\r
-\r
-<dt>decPlaces\r
-<dd>小数点より右側の桁数（デフォルトは 0）\r
-\r
-<dt>decPoint\r
-<dd>小数点のシンボル（翻訳ファイルでオーバーライドされなければ、デフォルトは '.'）\r
-\r
-<dt>thouSep\r
-<dd>千桁区切りのためのシンボル。（翻訳ファイルでオーバーライドされなければ、デフォルトは ','）\r
-\r
-<dt>negSign\r
-<dd>負数がどのように表示されるべきかを指定します。取り得る値は\r
-<ul>\r
-<li>L= 先頭にマイナスをつける（デフォルト）\r
-<li>T= 後ろにマイナスをつける\r
-<li>P= 括弧で囲む\r
-</ul>\r
-\r
-<dt>prefix\r
-<dd>数に始まりの文字列を付加します。一般的に通貨シンボルです。\r
-\r
-<dt>suffix\r
-<dd>数値の終わりに付加される文字列。例えば、 "%" シンボル。</dd>\r
-</dl>\r
-\r
-<dl>\r
-<a name='DateFormatting'></a>\r
-<p><em>日付フォーマット:</em></p>\r
-\r
-<dt>dateFmt\r
-<dd>date または datetime をどのように表示するのかを指定する文字列。\r
-デフォルトは "translateDate" であり、RicoTranslate オブジェクトで利用される dateFmt と timeFmt 文字列を意味します。\r
-（各種言語の翻訳ファイルでオーバーライドされなければ、、date のデフォルトは "mm/dd/yyyy" であり、datetime は "mm/dd/yyyy hh:mm:ss a/pm" です。）\r
-dateFmt="localeDate" ならば、その値は javascript のビルトイン関数である toLocaleDateString() を利用してフォーマットされる。\r
-dateFmt="localeDateTime" ならば、その値は javascript のビルトイン関数である toLocaleString() を利用してフォーマットされる。\r
-dateFmt 文字列は、以下の特殊文字シーケンスを含むでしょう。\r
-\r
-<ul>\r
-<li>yyyy - 4 桁の年\r
-<li>yy - 2 桁の年\r
-<li>mmmm - 月名\r
-<li>mmm - 3 文字の月名省略形。アジアの言語では、これはしばしば意味をなしません - これらの場合、それは完全な月の名前（mmmm と同じ）を返します。\r
-<li>mm - 2 桁の月数（ゼロで埋められた）\r
-<li>m - 1 または 2 桁の月数\r
-<li>dddd - 曜日\r
-<li>ddd - 3 文字の曜日省略形\r
-<li>dd - 2 桁の日数（ゼロで埋められた）\r
-<li>d - 1 または 2 桁の日数\r
-<li>hh - 2 桁の時、 12 時間時計（ゼロで埋められた）\r
-<li>h - 1 または 2 桁の時、 12 時間時計\r
-<li>HH - 2 桁の分、 24 時間時計（ゼロで埋められた）\r
-<li>H - 1 または 2 桁の時間、 24 時間時計\r
-<li>nn - 2 桁の分（ゼロで埋められた）\r
-<li>ss - 2 桁の秒（ゼロで埋められた）\r
-<li>a/p - a または p （am または pm のための）\r
-</ul>\r
-\r
-<pre>\r
-// display first column as "month year"\r
-columnSpecs : [{type:date, dateFmt:'mmm yyyy'}]\r
-</pre>\r
-</dd>\r
-\r
-<dt>prefix\r
-<dd>日付の先頭に付け加えられる文字列\r
-\r
-<dt>suffix\r
-<dd>日付の終わりに付加される文字列。例えば、タイムゾーンを含めるために利用出来ます。\r
-<pre>\r
-// indicate that times are GMT/UTC\r
-columnSpecs : [{type:datetime, suffix:' UTC'}]\r
-</pre>\r
-</dl>\r
-\r
-</body>\r
-</html>\r
projects / infodrom / rico3 / blobdiff