Rico LiveGrid の作成

Rico LiveGrid は 2 次元の JavaScript 配列でデータをバッファリングして、スクロールするテーブルにデータを表示します。ユーザがグリッドを垂直にスクロールする事によって、データは配列からグリッド上へ動的にコピーされます。バッファは次の項目からロードされる事が出来ます。

javascript 配列
HTML テーブル
XML ファイル
SQL データベースクエリ
カスタム javascript コールバック関数

利用モデル 1: javascript 配列からのデータのロード

javascript 配列へ表示されるデータをロードして下さい。

  var myData = [
    [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],
    [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],
    [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],
    [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']
  ];

グリッドを表示するのに必要な Rico javascript と css ファイルをロードして下さい。
```
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');
```
LiveGrid
これは、静的なバッファ（ AJAX では無い）で LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。
LiveGridMenu
これは、デフォルトのグリッドメニューをロードします。このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。
greenHdg.css
Rico は、いくつかのサンプルグリッドスタイルを持っています。 coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。
テーブルのデータ列を Rico バッファオブジェクトにロードして下さい。
```
  var buffer=new Rico.Buffer.Base();
  buffer.loadRowsFromArray(myData);
```

グリッドの見出しを含む、グリッドのオプションを定義して下さい。

  var opts = {  
    useUnformattedColWidth: false,
    defaultWidth : 90,
    visibleRows  : 'data',
    frozenColumns: 1,
    columnSpecs  : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},
                    {Hdg:'Column 2'},
                    {Hdg:'Column 3'},
                    {Hdg:'Column 4'},
                    {Hdg:'Column 5'}]
  };

グリッド、Rico.Buffer インスタンス、およびグリッドオプションのためにベース id を渡して、LiveGrid をインスタンス化してください。
```
  var ex1=new Rico.LiveGrid ('ex1', buffer, opts);
```
グリッドのためのデフォルトポップアップメニューを利用可能にするために、グリッドのメニューのプロパティを Rico.GridMenu のインスタンスに割り当てて下さい。
```
  ex1.menu=new Rico.GridMenu();
```

Rico.loadModule は、window.onload イベントの終了後に実行されると思います。あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。 javascript のすべてをまとめると、このようになります。

<script type='text/javascript'>
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');

Rico.onLoad( function() {
  var myData = [
    [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],
    [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],
    [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],
    [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5']
  ];
  var opts = {  
    useUnformattedColWidth: false,
    defaultWidth : 90,
    visibleRows  : 'data',
    frozenColumns: 1,
    columnSpecs  : [{Hdg:'Column 1',type:'number', ClassName:'alignright'},
                    {Hdg:'Column 2'},
                    {Hdg:'Column 3'},
                    {Hdg:'Column 4'},
                    {Hdg:'Column 5'}]
  };
  var buffer=new Rico.Buffer.Base();
  buffer.loadRowsFromArray(myData);
  var ex1=new Rico.LiveGrid ('ex1', buffer, opts);
  ex1.menu=new Rico.GridMenu();
});
</script>

最後に、グリッドを実行すべき位置に、HTML マークアップに div 要素を配置して下さい。ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。
```
<p class="ricoBookmark"><span id="ex1_bookmark"> </span></p>
<div id="ex1"></div>
```

利用モデル 2: HTML テーブルからのデータのロード

見出しは <thead> セクションにより、データは <tbody> セクションにより、HTML テーブルを定義して下さい。ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。

<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>
<table id="data_grid">
  <thead>

  <tr>
    <th>First column name</th>
    <th>Second column name</th>
    ...
    <th>Last column name</th>
  </tr>

  </thead>

  <tbody>

  <tr>
    <td>Row 1, column 1 data</td>
    <td>Row 1, column 2 data</td>
    ...
    <td>Row 1, last column data</td>
  </tr>

  <tr>
    <td>Row 2, column 1 data</td>
    <td>Row 2, column 2 data</td>
    ...
    <td>Row 2, last column data</td>
  </tr>

  ...

  <tr>
    <td>Row n, column 1 data</td>
    <td>Row n, column 2 data</td>
    ...
    <td>Row n, last column data</td>
  </tr>

  </tbody>
</table>

グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。
```
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');
```
LiveGrid
これは、静的なバッファ（ AJAX では無い）で LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。
LiveGridMenu
これは、デフォルトのグリッドメニューをロードします。このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。
greenHdg.css
Rico は、いくつかのサンプルグリッドスタイルを持っています。 coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。
テーブルのデータ列を Rico バッファオブジェクトにロードして下さい。
```
var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);
```
最後に、HTML テーブルの DOM の id とオプションを Rico.Buffer インスタンスに渡して（これは、 LiveGrid がテーブルの thead セクションから列の見出しをロードするのを許可します）、 LiveGrid を初期化します（この場合、最初の列の幅は 50 ピクセル、2 番目の列は 80 ピクセルの幅となります）。
```
var grid_options = { columnSpecs: [ {width:50}, {width:80} ] };
var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
```
Rico.loadModule は、window.onload イベントの終了後に実行されると思います。あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。 javascript のすべてをまとめると、このようになります。
```
<script type='text/javascript'>
Rico.loadModule('LiveGrid','LiveGridMenu','greenHdg.css');

Rico.onLoad( function() {
  var buffer = new Rico.Buffer.Base($('data_grid').tBodies[0]);
  var grid_options = { columnSpecs: [width:50, width:80] };
  var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
});
</script>
```

利用モデル 3: XML ファイルからのデータのロード

テーブルのヘッダセルを持ち、テーブルのボディセルは持たない、HTML テーブルを定義して下さい。ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。
```
<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>
<table id="data_grid">
  <tr>

    <th>First column name</th>
    <th>Second column name</th>

  </tr>
</table>
```
グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。
```
Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');
```
LiveGridAjax
これは、AJAX 対応のバッファで LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。
LiveGridMenu
これは、デフォルトのグリッドメニューをロードします。このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。
greenHdg.css
Rico は、いくつかのサンプルグリッドスタイルを持っています。 coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。
データをフェッチしてテーブルを実装するために、Rico バッファを作成して下さい。 AjaxXML バッファは、グリッドのスタートアップで提供された URL に、一つだけのデータのリクエストを行います。
```
var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');
```
この URL（実例の中にある "/controller/action?format=xml"）は、次のフォーマットでデータを返さなければなりません。
```
<ajax-response>
<response type='object' id='data_grid_updater'>
<rows update_ui='true' offset='0'>
<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>
<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>
</rows>
</response>
</ajax-response>
```
最後に、HTML テーブルの DOM の ID とオプションを Rico.Buffer インスタンスに渡して、LiveGrid を初期化します（columnSpecs は必要ではありませんが、列のカスタム化のためのプレースホルダーとして、ここに表示されます）。
```
var grid_options = { columnSpecs: [,] };
var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
```
Rico.loadModule は、window.onload イベントの終了後に実行されると思います。あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。 javascript のすべてをまとめると、このようになります。
```
<script type='text/javascript'>
Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');

Rico.onLoad( function() {
  var buffer = new Rico.Buffer.AjaxXML('/controller/action?format=xml');
  var grid_options = { columnSpecs: [,] };
  var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
});
</script>
```

利用モデル 4: SQL データベースクエリからデータをロードする

下記の説明は、Rico LiveGrid プラグインにおける ASP と PHP の実装に直接当てはまります。概念は .net の同じですが、実装方法は全く異なります (これがどのように .net で実装されるかについては、"ex2simple.aspx" を調べて下さい)。

実行するためにクエリを含むセッション変数を定義して下さい。変数名は、下の表の ID に適合しなければなりません。データを要求するとき、グリッドは ricoXMLquery にそのIDを渡します、そして、ricoXMLquery はセッションからクエリテキストを取得するためにそれを利用するでしょう。
- ASP:
```
<%
session.contents("data_grid")="select ID,Name,City from customers"
%>
```
- PHP:
```
<? 
$_SESSION['data_grid']="select ID,Name,City from customers";
?>
```
- .net:
```
Sub Page_Load(Sender As object, e As EventArgs)
  data_grid.sqlQuery="select ID,Name,City from customers"
  ' session variable is set by the control
End Sub
```
テーブルのボディセルでは無く、ヘッダセルを供給して、HTML テーブルを定義して下さい。ブックマークのためのマークアップを含む事により、グリッドのスクロール位置が表示されます。
```
<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>
<table id="data_grid">
  <tr>

    <th>Customer #</th>
    <th>Customer Name</th>
    <th>City</th>

  </tr>
</table>
```
グリッドを表示するために必要な Rico javascript と css ファイルをロードして下さい。
```
Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');
```
LiveGridAjax
これは、AJAX 対応バッファで LiveGrid を表示するのに必要な Rico javascript と css ファイルをロードします。
LiveGridMenu
これは、デフォルトのグリッドメニューをロードします。このメニューは、LiveGrid で出来る事の全てにアクセスする方法を提供します。それは選択された列と使用されるバッファのタイプに基づく、ユーザに提示された選択項目を調整します。メニュー無しでグリッドを使用するか、またはアプリケーションの必要性によりカスタマイズされた独自のメニューを作成するかを、選ぶことが出来ます。
greenHdg.css
Rico は、いくつかのサンプルグリッドスタイルを持っています。 coffee-with-milk、grayedout、greenHdg、iegradient (Internet Explorer 専用)、tanChisel、そして warmfall。あなたは、含まれているスタイルの 1 つを選ぶか、独自の物を作成するかを選ぶでしょう。
データをフェッチしてテーブルを実装するために、Rico バッファを作成して下さい。一度にすべてのデータをグリッドにフェッチする AjaxXML バッファと異なり、 AjaxSQL バッファは、塊でデータをフェッチします。これは、LiveGrid が能率的に数千または何十万の列を含んでいるクエリ結果を表示する事を可能にします。
```
var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');
```
この URL （"ricoXMLquery.asp" の実例で）は、データベースからデータをフェッチして、この XML フォーマットでグリッドにそれを戻すために、含まれるプラグインの内の 1 つを利用します。
```
<ajax-response>
<response type='object' id='data_grid_updater'>
<rows update_ui='true' offset='0'>
<tr><td>Data for row 1, cell 1</td><td>Data for row 1, cell 2</td></tr>
<tr><td>Data for row 2, cell 1</td><td>Data for row 2, cell 2</td></tr>
</rows>
<rowcount>99</rowcount>
</response>
</ajax-response>
```
<rowcount> タグはオプションですが、リクエストに "get_total" クエリーストリングパラメータが存在する場合は、いつでも返されなければなりません。
最後に、HTML テーブルの DOM の ID とオプションを Rico.Buffer インスタンスに渡して、LiveGrid を初期化します（columnSpecs は必要ではありませんが、列のカスタム化のためのプレースホルダーとして、ここに表示されます）。
```
var grid_options = { columnSpecs: [,,] };
var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
```
Rico.loadModule は、window.onload イベントの終了後に実行されると思います。あなたは Rico.onLoad メソッドに初期化関数を渡さなければなりません、なぜなら、Rico モジュールがロードされた後で、グリッドの初期化が実行される事を確実なものにするためです。 javascript のすべてをまとめると、このようになります。
```
<script type='text/javascript'>
Rico.loadModule('LiveGridAjax','LiveGridMenu','greenHdg.css');

Rico.onLoad( function() {
  var buffer = new Rico.Buffer.AjaxSQL('ricoXMLquery.asp');
  var grid_options = { columnSpecs: [,,] };
  var grid = new Rico.LiveGrid('data_grid', buffer, grid_options);
});
</script>
```

利用モデル 5: カスタムコールバック関数を利用してデータをロードする

このモデルは、 xmlHTTPrequest を利用してデータをフェッチするのでは無く、 javascript コールバック関数を利用してデータをフェッチする事以外はモデル 3 や 4 と同じ方法で動作します。これにより、コールバック関数で Google Gears を呼ぶような創造的な事をすることが出来ます。コールバックをセットアップする事は、非常に簡単です。データプロバイダの URL の文字列を含むデータを AjaxXML または AjaxSQL コンストラクタに渡すのでは無く、その代りにコールバック関数を渡すだけです。

以下の AjaxXML バッファを利用するコードは examples/client/gridJSbuffer.html から取得出来ます。 "jsfetch" コールバック関数は 100 行の長さで 5 列の幅の二次元配列を返します。 AjaxXML は、そのバッファを（グリッドのスタートアップで）一度だけロードするので、 jsfetch は一度だけ呼ばれます。このオプションのハッシュは、Prototype の Ajax.Request メソッドで利用されるオプションのハッシュと構造が同じです。

buffer=new Rico.Buffer.AjaxXML(jsfetch);

function jsfetch(options) {
  Rico.writeDebugMsg("jsfetch");
  var newRows=[], offset=options.parameters.offset;
  for (var r=0; r<100; r++) {
    var row=[];
    row.push(offset.toString());
    row.push(new Date().toString());
    for (var c=2; c<5; c++) row.push('cell '+r+':'+c);
    newRows.push(row);
  }
  options.onComplete(newRows);
}

以下の AjaxSQL バッファを利用するコードは examples/client/gridJSbuffer2.html から取得出来ます。 "jsfetch" コールバック関数は、500 行の長さで 5 列の幅の二次元配列をシミュレーションします。しかし、どんなコールバック中でも、その配列の options.parameters.offset 行から options.parameters.offset + options.parameters.page_size 行までのセクションが返されます。

buffer=new Rico.Buffer.AjaxSQL(jsfetch);

function jsfetch(options) {
  var newRows=[], totrows=500;
  var offset=options.parameters.offset;
  var limit=Math.min(totrows-offset,options.parameters.page_size)
  for (var r=0; r<limit; r++) {
    var row=[];
    row.push(new Date().toString());
    row.push(offset.toString());
    for (var c=2; c<5; c++) row.push('cell '+(r+offset)+':'+c);
    newRows.push(row);
  }
  options.onComplete(newRows,false,totrows);
}

options.onComplete は、次のパラメータをとります。

newRows - それぞれのアイテムが文字列の二次元配列
newAttr - それぞれのアイテムが、セルの acceptAttr の値、または acceptAttr が利用されていないなら false を含むオブジェクトの二次元配列
totalRows - データセット内の行の総数を表す整数
errMsg - エラーが起こったとき、ユーザに表示されるメッセージテキスト

デバッグ

Rico 2.0 はメッセージログにタイムスタンプデバッグメッセージを配達する能力を持っています。そのログは、HTML のテキストエリアか、ブラウザの javascript コンソールに表示されるでしょう。

もし、テキストエリアが '_debugmsgs' を加えたライブグリッドテーブルの ID と共に存在するならば、例えば
```
<textarea cols="100" rows="5" id="data_grid_debugmsgs" />
```
そして、このテキストエリアがメッセージログのために使われます。
あるいは、テキストエリアは Rico.setDebugArea() の呼び出しによって指定されるかもしれません。
```
<textarea id='debug' rows='5' cols='80'></textarea>
<script type='text/javascript'>
Rico.setDebugArea('debug');
</script>
```
テキストエリアが指定されないならば、Rico はブラウザのビルトイン javascript コンソールを使おうとします。以下のコンソールで動作する事が知られています:
- Firefox の Firebug アドオンコンソール
- Opera javascript コンソール
- Safari javascript コンソール

グリッドメニュー

Rico LiveGrid は、多くの機能的なビルトインが付属しますその機能にアクセスするために、Rico はメニューのデフォルトの設定を含みます -- ricoLiveGridMenu.js で定義されています。デフォルトメニューを使うために、単に 'LiveGridMenu' モジュールをロードして、そのグリッドメニュープロパティを Rico.GridMenu クラスのインスタンスに割り当てて下さい。

  Rico.loadModule('LiveGridMenu');
  ...
  var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);
  ex1.menu=new Rico.GridMenu();

デフォルトでは、ユーザがグリッドセルをダブルクリックする時メニューが開きます。メニューを開くイベントを変更するために、グリッドの menuEvent オプションに値を割り当てて下さい。以下のコードは、右クリックでメニューを開きます。

  Rico.loadModule('LiveGridMenu');
  ...
  var grid_options = {
    menuEvent: 'contextmenu'
  }
  var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);
  ex1.menu=new Rico.GridMenu();

Rico.GridMenu は、更なるメニューアイテムを追加するために、コールバック（dataMenuHandler）を提供します。グリッドメニューは常に動的に構築されます -- ユーザーがクリックした行と列のためにカスタマイズされます。コールバック関数が毎回呼ばれるように、メニューは起動されて、それぞれの起動で要求されるメニューアイテムを加えなければなりません。

  Rico.loadModule('LiveGridMenu');
  ...
  var ex1=new Rico.LiveGrid ('ex1', buffer, grid_options);
  ex1.menu=new Rico.GridMenu();
  ex1.menu.options.dataMenuHandler=myCustomMenuItems;
  ...
function myCustomMenuItems(grid,r,c,onBlankRow) {
  if (buffer.getWindowValue(r,c)=='Special Value')
    grid.menu.addMenuItem("Special menu item", specialAction);
}
function specialAction() {
  ...
}

完全なカスタムメニューを作成する事も可能です。例えば、ex5.php/asp/aspx を見て下さい。

注意

もし、ライブグリッドテーブル名に '_bookmark' が追加された名前に、DOM の ID が一致する要素を作成するなら、グリッドに表示されいるレコードの数を示しているテキストが更新されるでしょう。 LiveGrid の実例は、一般的にこのマークアップを使います。
```
<p class="ricoBookmark"><span id="data_grid_bookmark"> </span></p>
```
ライブグリッドを表示するブラウザは、strict （別名 "標準" ）モードで実行されていなければなりません。したがって、あなたは <html> タグの直前に doctype の宣言を含めなければなりません。例えば
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
```

リファレンス

コンストラクタ


  var grid = new Rico.LiveGrid (table_id, rico_buffer, grid_options);

table_id はライブグリッドによって実装される、テーブルの DOM id です
rico_buffer は Rico のバッファです、例えば
- Rico.Buffer.Base （AJAX 対応では無いテーブルのために）
- Rico.Buffer.AjaxXML
- Rico.Buffer.AjaxSQL
grid_options （下記参照）

オプション

グリッドサイズ

visibleRows （.net の行）

グリッドに何行表示しますか？正の整数は、グリッドが正確に多くの行を常に含まなければならないことを示しています。負の値は、以下の意味を持ちます。

-1: クライアントウィンドウに合わせたグリッドサイズ（デフォルト）
-2: クライアントウィンドウとデータの小さい方のグリッドサイズ
-3: ページのボディにスクロールバーを持たないためのグリッドサイズ
-4: DOM の親ノードによるグリッドサイズ

minPageRows

表示される行数の最小値。visibleRows が 0 以下の時のみ利用される。（Rico 2b3 からはデフォルトが 2 で、Rico 2b3 までは 1）

maxPageRows

表示される行数の最大値。visibleRows が 0 以下の時のみ利用される。（デフォルトは 50）

defaultWidth

列の初期幅を設定する際に使われる整数。説明については列幅オプションを見て下さい。（デフォルトは 100）

useUnformattedColWidth

列の初期幅を設定する際に使われる真偽値。説明については列幅オプションを見て下さい。（デフォルトは true）

scrollBarWidth

いくらかの計算のために、LiveGrid はページ上のスクロールバーの幅を知っている必要があります。（デフォルトは 19）

minScrollWidth

固定された列の幅がウィンドウ幅を上回る時の、スクロールエリアのピクセル幅の最小値。（デフォルトは 100）

グリッドデータ

offset: 表示されるデータの最初の行（デフォルトは 0）
prefetchBuffer: ページのロード時にバッファの（そして、その結果グリッドの）ロードを行いますか？
sortCol: 初期ソートのための、列の名前かインデックス
sortDir: 初期ソートの方向
取り得る値は 'ASC'、'DESC'
getQueryParms: もし true なら、フィルタパラメータのための、そのウェブページのクエリ文字列をチェックし、そして見つかるどんなフィルタでも適用します。フィルタパラメータは "f[x]=" の形でなければならず、"x" は列のインデックスです。（デフォルトは false ）

ヘッダ構成

frozenColumns

グリッドの左側の固定された列の数（Excel のように）

headingSort

ソートを容易にするために、どのように見出しが表示されるかを定義する文字列。

'link' -- 見出しに列をソートしてくれるリンクを作成します（デフォルト）
'hover' -- ユーザは、ソートするために、見出しのセルのどんな部分でもクリックする事が出来ます。カーソルがセル上でホバーする時、見出しは背景色を変えます。
'none' -- 見出し上のイベントは利用不能です。

hdrIconsFirst

見出しの前後に、ソートとフィルタのアイコンを置きます（デフォルトは true）

allowColResize

ユーザによる列のリサイズを許しますか？ true なら、個々の列のリサイズを利用不能にするために columnSpecs の noResize を利用します。

panels

第二の見出しとして用いる事が出来る文字列の配列です。 LiveGrid Forms で、入力フォーム上のタブを付けられたパネルのための見出しを提供します。

PanelNamesOnTabHdr

panels[] の文字列を第二の見出しとして利用するために 'true' を設定します。 LiveGrid Forms では、 panels[] は入力フォームとしてのみ利用されるので、'false' が設定されるでしょう。

FilterLocation

フィルタを設置する見出しの行を指定します。 -1 は、新しい行をヘッダに追加し、新しい行がフィルタリングのために利用されるようにします。 filterUI のオプションも見て下さい。

FilterAllToken

選択フィルタで "show all values" を示すトークン（デフォルトは "___ALL___"）。

画像

resizeBackground: 列のリサイズハンドルに利用される画像（デフォルトは 'resize.gif'）
sortAscendImg: 列を昇順でソートする事を示すために使われる画像（デフォルトは 'sort_asc.gif'）
sortDescendImg: 列を降順でソートする事を示すために使われる画像（デフォルトは 'sort_desc.gif'）
filterImg: 列に対し現在利用中のフィルタを示すために使われる画像（デフォルトは 'filtercol.gif'）

クッキーオプション

saveColumnInfo: グリッドのクッキーに、どの詳細設定を保存するかを指定します。一つのクッキーだけが、それぞれのグリッドのために利用されます。幅の設定が、列の非表示／表示の状態を含む事に注意して下さい。（デフォルトは {width:true, filter:false, sort:false}）
.netプラグインでは、このオプションは、3 つの別々のプロパティによって表現されます。 saveColumnWidth、saveColumnFilter、saveColumnSort。
cookiePrefix: クッキー名の先頭に付け加えられる文字列（デフォルトは 'RicoGrid.'）
cookieDays: 数字の日数前のクッキーは期限切れになります。指定しなければ、クッキーは現在のセッションの間だけ維持されます。（デフォルトは null）
cookiePath: グリッドのクッキーを読む事が出来るトップレベルディレクトリを設定します。指定しなければ、それはクッキーを設定するページのパスになります。（デフォルトは null）
cookieDomain: クッキーがどのドメインに送られなければならないかについて、ブラウザに知らせます。指定しなければ、それはクッキーを設定するページのドメインになります。（デフォルトは null）

ハイライティングとセレクション

highlightElem

何がハイライトまたは選択されるかについて指定する文字列。

'cursorRow' -- the grid row under the cursor
'cursorCell' -- the grid cell under the cursor
'menuRow' -- the grid row where the menu is displayed
'menuCell' -- the grid cell where the menu is displayed
'selection' -- allow the user to select cells
'none' -- never highlight

highlightSection

テーブルのどのセレクションがハイライトされるかについて指定する整数

1 -- 固定された部分
2 -- スクロールする部分
3 -- すべて（デフォルト）
0 -- 無し

highlightMethod

セルや行がハイライトされる方法。取り得る値は

'outline' -- クライアント側で、最も CPU 集約型では無い
'class' -- ハイライトされたセル／行のCSS クラスを追加（デフォルト）
'both' -- アウトラインとクラスの両方を利用するハイライト

highlightClass

クラスによってハイライトされる時、クラス名として利用されます（デフォルトは 'ricoLG_selection'）

エクスポートと印刷

maxPrint: ユーザに印刷／エクスポートを許す最大行数。印刷／エクスポートを利用不能にするには 0 を設定します。（デフォルトは 1000）
exportWindow: エクスポートウィンドウが生成される時に、 window.open() に渡されるオプション文字列。（デフォルトは "height=400,width=500,scrollbars=1,menubar=1,resizable=1"）

イベントコントロール

menuEvent

グリッドメニューがいつ呼び出されるべきかを指定する文字列

'click' -- シングルクリックでメニューを呼び出す
'dblclick' -- ダブルクリックでメニューを呼び出す（デフォルト）
'contextmenu' -- 右クリックでメニューを呼び出す
'none' -- メニューをポップアップしない

windowResize

window.resize イベントの間にグリッドの大きさを変更するかどうかを指定する真偽値？グリッドがアコーディオンに組み込まれる時に、これに false が設定されなくてはなりません。（デフォルトは true）

イベントハンドル

sortHandler: （デフォルトは Rico.LiveGridMethods.sortHandler -- バインドされた）
filterHandler: （デフォルトは Rico.LiveGridMethods.filterHandler -- バインドされた）
onRefreshComplete: （デフォルトは Rico.LiveGridMethods.bookmarkHandler -- バインドされた）
rowOverHandler: （デフォルトは Rico.LiveGridMethods.rowMouseOver -- イベントリスナーとしてバインドされた）
mouseDownHandler: （デフォルトは Rico.LiveGridMethods.selectMouseDown -- イベントリスナーとしてバインドされた）
mouseOverHandler: （デフォルトは Rico.LiveGridMethods.selectMouseOver -- イベントリスナーとしてバインドされた）
mouseUpHandler: （デフォルトは Rico.LiveGridMethods.selectMouseUp -- イベントリスナーとしてバインドされた）
onscroll: グリッドが垂直にスクロールされる時は、いつでも呼ばれます。（デフォルトは null）
onscrollidle: グリッドが垂直にスクロールされた 1、2 秒後に呼ばれます。（デフォルトは null）
click: グリッドセルがクリックされた時に呼ばれます。（デフォルトは menuEvent='click' で無ければ null）
dblclick: グリッドセルがダブルクリックされた時に呼ばれます。（デフォルトは menuEvent='dblclick' で無ければ null）
contextmenu: グリッドセルが右クリックされた時に呼ばれます。（デフォルトは menuEvent='contextmenu' で無ければ null）

列ごとの構成

各々の列のためのオプションは、columnSpecs オプションに含まれます。 columnSpecs は、各々の列のためのエントリに関する配列です。各々の列のエントリは、以下のいずれかで行う事が出来ます。

null （デフォルト） -- その場合、Rico.TableColumn.DEFAULT. の仕様によって列はフォーマットされます。グリッドの多くの列が共通のフォーマットを共有するならば、グリッドのデフォルト列仕様をオーバーライドする事は意味があるかもしれません。
```
Rico.TableColumn.DEFAULT = {ClassName:'aligncenter', width:50};
```
この場合は、仕様の無いどんな列でも、整列は中央で幅は 50 ピクセルの内容を持ちます。
a string -- 列のフォーマットを指定する単純な方法を提供します。 DOLLAR、EURO、PERCENT、QTY、DEFAULT の値がビルトインされています。独自のものを定めることも可能です。温度フォーマットを定義したこの例は、weather.php から取得されます
```
Rico.TableColumn.TEMP = {type:'number', decPlaces:0, 
  ClassName:'alignright', suffix:'&deg;C', width:50};
var opts = {  
  frozenColumns : 1,
  columnSpecs   : [{width:120},{width:70},{width:70},{width:100},
                   'TEMP','TEMP','TEMP',
                   {width:150},{width:200},{width:60}]
};
```
an object -- 下記の表にあるプロパティの一つ以上のエントリを含む。ここに、列 0、1 と 3 が仕様を含む例を挙げます。列 2 はデフォルトの仕様を取得します。
```
columnSpecs : [{canSort:false, noResize:true, ClassName:'alignright'},
               {ClassName:'aligncenter'},
               ,
               {visible:false}]
```

Hdg

列の見出しテキストを指定する代わりの方法。グリッド ID が、html テーブルの代わりに <div> を参照するなら、LiveGrid によってのみ利用されます。

canSort

列をソートする事が出来ます。（デフォルトは grid.options.canSortDefault）

canFilter

列をフィルタする事が出来ます。（デフォルトは grid.options.canFilterDefault）

canDrag

列のセルは、ドラッグアンドドロップオペレーションのソースとして用いられる事が出来ます。 "DragAndDrop" モジュールはロードされなければなりません。一時的なドラッグオブジェクトは "LiveGridDraggable" クラスが持ちます。実例として、drag_and_drop_grid.html を見て下さい。（デフォルトは false）

canHide

列を表示／非表示する事が出来ます。（デフォルトは grid.options.canHideDefault）

visible

列は、初めは隠されていません。 grid.options.saveColumnInfo.width が true で、列のためのクッキーに値があるなら、クッキーの値が優先されます。（デフォルトは true）

width

列の初期幅（ピクセルで）を指定する整数。ここに、それぞれの列の初期幅を設定するために LiveGrid が利用するアルゴリズムがあります。

options.saveColumnInfo.width が true で、列情報がグリッドのクッキーに存在する場合は（以前にグリッドの列の上でリサイズを実行したユーザのために）クッキーのその幅が利用されます。そうでない場合は、、、
options.columnSpecs に列の幅仕様があれば、その幅仕様が利用されます。一例として、 ex3.php/asp/aspx を見て下さい。そうでない場合は、、、
options.useUnformattedColWidth が true で（デフォルト）、グリッドヘッダが html テーブルから初期化されるならば、htmlテーブルの列の幅が利用されます。通常 col タグを用いて初期テーブルの列幅をコントロールする事が出来ます。(例えば <col style='width:40px;' >)。テーブル幅全体がブラウザー幅より小さいならば、これは動作します。しかし、それがより大きいならば、ブラウザはしばしば "col width" を無視して、全ての列を利用できるウインドウ幅の中に押し込もうとします。このように、列幅を設定するためにこの方法を使用することは信頼出来ません。そうでない場合は、、、
options.useUnformattedColWidth が false ならば、列の幅は options.defaultWidth により設定されます。（デフォルトは 100）

したがって、列幅を LiveGrid と SimpleGrid で設定する最も信頼できる方法は、options.columnSpecs[] ですべての列に幅を指定することになります。多くの列が共通の幅を共有するならば、options.useUnformattedColWidth=false を設定して、options.defaultWidth を共通の幅に設定する事によって、いくらかの近道をする事が出来ます。

noResize

列のリサイズを許しますか？（デフォルトは grid.options.allowColResize）

ClassName

デフォルトでは、LiveGrid はユニークな CSS クラス名を、table_id + '_col' + column_index の命名規約に従い、それぞれの列に割り当てます。例えば、グリッド 'mygrid' の第 4 列は、クラス名 'mygrid_col3' を持ちます。 ClassName オプションの値は、このデフォルト名をオーバーライドします。 ClassName オプションは、Rico が提供する 'alignright' と 'aligncenter' クラスによって列の整列を指定するために、最も一般的に用いられます。なので、グリッドの最初の 3 つの列が赤い背景色に白いテキストで表示されることを望むならば、あなたは以下のどちらでもすることが出来ます。

In CSS:
.mygrid_col0 div.ricoLG_cell, 
.mygrid_col1 div.ricoLG_cell, 
.mygrid_col2 div.ricoLG_cell {
  color: white;
  background-color: red;
}

または

In CSS:
.WhiteOnRed div.ricoLG_cell {
  color: white;
  background-color: red;
}

In javascript:
columnSpecs : [{ClassName:'WhiteOnRed'},
               {ClassName:'WhiteOnRed'},
               {ClassName:'WhiteOnRed'},
               ...

最後に、この ClassName がグリッドの見出しに適用されない点に注意してください - ヘッダの整列を達成するためには、<th> タグで align="right" を利用して下さい。

type

これらの値の内の一つを含む文字列。

text - 列の値のどんなタグでも、ユーザに表示される前に取り除かれます。
showTags - 列の値のどんなタグでも、ユーザにテキストとして表示されます。
number - 列の値は数として扱われ、列仕様で与えられるどんな number formatting options でも適用されます。
datetime - 列の値は日付 & 時間として扱われ、列仕様で与えられるどんな date formatting options でも適用されます。
UTCasLocalTime - 列やデータベースの値は GMT/UTC 日付 & 時間として扱われ、列仕様で与えられるどんな date formatting options でも適用されます。表示される前に、その値はユーザのローカルタイムゾーンに変換されます。
date - 列の値は日付として扱われ、列仕様で与えられるどんな date formatting options でも適用されます。
raw (default) - 列の値は、グリッドのセルに直接表示されます。どんなHTMLマークアップでもセルにコピーされます。

コントロール

特別なフォーマットを列に提供するのに用いられるオブジェクト。いくつかの列コントロールは LiveGrid により提供されます。それらのためのコードは、 ricoLiveGridControls.js にあります。ここに、提供されるコントロールの簡潔な記述があります。

Rico.TableColumn.checkboxKey(showKey)

<checkbox> <key value> として列のユニークキーを表示し、どのキーがユーザによって選択されているかを見逃しません。キーの値は <、 >、または & を含むべきではありません。

Rico.TableColumn.checkbox(checkedValue, uncheckedValue, defaultValue, readOnly)

チェックボックスとして列を表示します。データベースの列は、二つの値のみを含まなければなりません（例えば yes/no）。以下のコードは、ex7 から取得されます（列の値は 1 と 0）。

columnSpecs: [{canHide:false,
               control:new Rico.TableColumn.checkbox('1','0'),
               ClassName:'aligncenter'},
              'specQty'],

Rico.TableColumn.textbox(boxSize, boxMaxLen, readOnly)

テキストボックス内に列の値を表示します。

Rico.TableColumn.HighlightCell(chkcol,chkval,highlightColor,highlightBackground)

特定の値が指定された列に存在する時、グリッドのセルをハイライトします。以下のコードは ex2highlight から取得され、列 1 が "HANAR" を含む時、行全体をハイライトします。

var CustId='HANAR';
var CustIdCol=1;
var highlight=Rico.TableColumn.HighlightCell;
...
columnSpecs: [
{ control:new highlight(CustIdCol,CustId,'red','yellow') },
{ control:new highlight(CustIdCol,CustId,'red','yellow') },
{ control:new highlight(CustIdCol,CustId,'red','yellow') },
{ control:new highlight(CustIdCol,CustId,'red','yellow') },
{ control:new highlight(CustIdCol,CustId,'red','yellow') },
{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') },
{ type:'date', control:new highlight(CustIdCol,CustId,'red','yellow') }]

Rico.TableColumn.bgColor()

データベースの値が css カラーの名前や値を含みます。

Rico.TableColumn.link(href,target)

データベースの値が、他のページへの URL を含みます。 href パラメータは、文字列に "{x}" を含む事により、グリッドの値への参照を含むかもしれません。 x は列の番号です。以下のコードは ex6 から取得されます。

columnSpecs: [,
{control:new Rico.TableColumn.link('ex2.asp?id={0}','_blank'),
 width:250},
,'specQty']

Rico.TableColumn.image()

データベースの値が画像への url を含みます。以下のコードは photos.php から取得されます。

imgctl=new Rico.TableColumn.image();
...
columnSpecs: [
{control:imgctl,width:90},,,
{type:'datetime'},{width:200}]

Rico.TableColumn.lookup(map, defaultCode, defaultDesc)

データベースの値を表示される値にマップします。

アプリケーション特有のロジックを実装する、独自の列コントロールを書く事も可能です。ここに例があります。

// Display values white on black if
//   first column contains the value "reverse"
// Usage: { control:new MyCustomColumn() }
MyCustomColumn = Class.create();

MyCustomColumn.prototype = {
  initialize: function() {},

  _clear: function(gridCell,windowRow) {
    gridCell.style.color='';
    gridCell.style.backgroundColor='';
    gridCell.innerHTML='&nbsp;';
  },

  _display: function(v,gridCell,windowRow) {
    var col0=this.liveGrid.buffer.getWindowValue(windowRow,0);
    if (col0=="reverse") {
      gridCell.style.color='white';
      gridCell.style.backgroundColor='black';
    } else {
      gridCell.style.color='';
      gridCell.style.backgroundColor='';
    }
    gridCell.innerHTML=this._format(v);
  }
}

filterUI

FilterLocation オプションがグリッドに指定されるならば、filterUI はそれぞれの列がどのようにフィルタされるかについてコントロールします。もし filterUI が、

null または省略されたら、列にはフィルタが表示されません。
't' - テキストボックスフィルタを生成し、レコードはユーザのキーボードからの入力によってフィルタされて表示されます。
任意に後につくキャレット（^）は、テキストボックスの値が列の値の始めに一致すべき事を示します。そうでない場合は、列の値のどこにでも一致します。
任意に後につく数値はテキストボックスの数値を意味します（デフォルトのサイズは 10）
```
filterUI:'t^20' 
// will create a text box that is 20 characters wide
// text typed into the box will be compared to
//    the beginning of each column value
```
's' - リストに含む事の出来るすべての列の値と共にセレクトリストフィルタを生成します。グリッドのソースが SQL クエリなら、'select distinct' クエリを利用して実装されます。

数値フォーマット：

multiplier

表示される前に、その値はこの数値によって乗算されます。（デフォルトは 1）

decPlaces

小数点より右側の桁数（デフォルトは 0）

decPoint

小数点のシンボル（翻訳ファイルでオーバーライドされなければ、デフォルトは '.'）

thouSep

千桁区切りのためのシンボル。（翻訳ファイルでオーバーライドされなければ、デフォルトは ','）

negSign

負数がどのように表示されるべきかを指定します。取り得る値は

L= 先頭にマイナスをつける（デフォルト）
T= 後ろにマイナスをつける
P= 括弧で囲む

prefix

数に始まりの文字列を付加します。一般的に通貨シンボルです。

suffix

数値の終わりに付加される文字列。例えば、 "%" シンボル。

日付フォーマット:

dateFmt

date または datetime をどのように表示するのかを指定する文字列。デフォルトは "translateDate" であり、RicoTranslate オブジェクトで利用される dateFmt と timeFmt 文字列を意味します。（各種言語の翻訳ファイルでオーバーライドされなければ、、date のデフォルトは "mm/dd/yyyy" であり、datetime は "mm/dd/yyyy hh:mm:ss a/pm" です。） dateFmt="localeDate" ならば、その値は javascript のビルトイン関数である toLocaleDateString() を利用してフォーマットされる。 dateFmt="localeDateTime" ならば、その値は javascript のビルトイン関数である toLocaleString() を利用してフォーマットされる。 dateFmt 文字列は、以下の特殊文字シーケンスを含むでしょう。

yyyy - 4 桁の年
yy - 2 桁の年
mmmm - 月名
mmm - 3 文字の月名省略形。アジアの言語では、これはしばしば意味をなしません - これらの場合、それは完全な月の名前（mmmm と同じ）を返します。
mm - 2 桁の月数（ゼロで埋められた）
m - 1 または 2 桁の月数
dddd - 曜日
ddd - 3 文字の曜日省略形
dd - 2 桁の日数（ゼロで埋められた）
d - 1 または 2 桁の日数
hh - 2 桁の時、 12 時間時計（ゼロで埋められた）
h - 1 または 2 桁の時、 12 時間時計
HH - 2 桁の分、 24 時間時計（ゼロで埋められた）
H - 1 または 2 桁の時間、 24 時間時計
nn - 2 桁の分（ゼロで埋められた）
ss - 2 桁の秒（ゼロで埋められた）
a/p - a または p （am または pm のための）

// display first column as "month year"
columnSpecs : [{type:date, dateFmt:'mmm yyyy'}]

prefix

日付の先頭に付け加えられる文字列

suffix

日付の終わりに付加される文字列。例えば、タイムゾーンを含めるために利用出来ます。

// indicate that times are GMT/UTC
columnSpecs : [{type:datetime, suffix:' UTC'}]