Rico SimpleGrid の作成

SimpleGrid は Rico 2.0 で追加され、LiveGrids と同じ機能のいくらかを共有します - リサイズ可能な列、固定された列と固定された見出し。 しかしながら、LiveGrid と異なり、データは静的であり DOM に存在します - それゆえに、バッファリング、AJAX リフレッシュ、ソート、フィルタリングの機能がありません。 なぜ、SimpleGrid を使うのでしょうか？

• それぞれのセルが含むことが出来るものが、より柔軟であるので - 列内のセルがすべて同じタイプである必要はありません。
• 状況によって、それは LiveGrid よりクライアント上で、より良く実行することができます。 特にグリッドに多くの列を表示している遅いクライアントで。
• 最後に、SimpleGrid は入力要素である（チェックボックス、セレクトリスト、その他）を含むことができます。 LiveGrid も入力要素を含むことができますが、要素の値が LiveGrid のバッファに保存されるので、 サーバに値をサブミットするには扱いにくいです。 SimpleGrids は、この問題で苦しみません。 あなたが単に標準的な <form>...</form> タグでグリッド全体を囲めば、 グリッド中のどんな入力要素でもサーバーへサブミットされます。

SimpleGrids は、次の 2 つの方法で作成する事が出来ます。

1. SimpleGrid プラグインの中の 1 つを用いて。PHP、ASP と .net のためのプラグインが存在します。
2. XSLTを用いて。Rico は、標準的なHTMLテーブルを SimpleGrid に変換する XSL ファイルを持っています。

利用モデル 1: SimpleGrid プラグインの利用

このセクションは、Rico ディストリビューションに含まれる simplegrid.php/asp/aspx の実例について記述します

• PHP では。
  • 最初に、SimpleGrid プラグインへの参照を作成して下さい。

    require "../../plugins/php/SimpleGrid.php";
    

  • SimpleGrid プラグインクラスのインスタンスを作成して下さい（サーバサイド）。

    $grid=new SimpleGrid();
    

  • グリッドの見出しを作成して下さい。 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します - それはリサイザを得ます。 メインの見出し行の列数は、データの列数と 必ず 同じでなければなりません。 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。

    $grid->AddHeadingRow(true);
    for ($c=1; $c<=$numcol; $c++) {
      $grid->AddCell("Column $c");
    }
    

  • グリッドデータセクションを実装して下さい。 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <tr> タグを配置します。 どこででも AddCell() を呼んで、 <td> タグを配置します。

    for ($r=1; $r<=100; $r++) {
      $grid->AddDataRow();
      $grid->AddCell($r);
      for ($c=2; $c<=$numcol; $c++) {
        $grid->AddCell("Cell $r:$c");
      }
    }
    

  • テーブルをレンダリングして下さい（html 出力を生成します）。 最初のパラメータはグリッド id で、第二のパラメータは、固定された列の数です。

    $grid->Render("ex1", 1);
    

• ASP では。
  • 最初に、SimpleGrid プラグインへの参照を作成して下さい。

    <!-- #INCLUDE FILE = "../../plugins/asp/SimpleGrid.vbs" -->
    

  • SimpleGrid プラグインクラスのインスタンスを作成して下さい（サーバサイド）。

    set grid=new SimpleGrid
    

  • グリッドの見出しを作成して下さい。 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します - それはリサイザを得ます。 メインの見出し行の列数は、データの列数と 必ず 同じでなければなりません。 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。

    grid.AddHeadingRow true
    for c=1 to numcol
      grid.AddCell "Column " & c
    next
    

  • グリッドデータセクションを実装して下さい。 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <tr> タグを配置します。 どこででも AddCell() を呼んで、<td> タグを配置します。

    for r=1 to 100
      grid.AddDataRow
      grid.AddCell r
      for c=2 to numcol
        grid.AddCell "Cell " & r & ":" & c
      next
    next
    

  • テーブルをレンダリングして下さい（html 出力を生成します）。 最初のパラメータはグリッド id で、第二のパラメータは、固定された列の数です。

    grid.Render "ex1", 1
    

• .net では。
  • 最初に、SimpleGrid プラグインへの参照を作成して下さい。

    <%@ Register TagPrefix="Rico" TagName="SimpleGrid" 
        Src="../../plugins/dotnet/SimpleGrid.ascx" %>
    

  • SimpleGrid プラグインクラスのインスタンスを作成して下さい（サーバサイド）。

    <Rico:SimpleGrid runat='server' id='ex1' FrozenCols='1' />
    

  • グリッドの見出しを作成して下さい - 通常は Page_Load イベント内で。 AddHeadingRow に 'true' を渡して、これがメインの見出し行である事を示します - それはリサイザを得ます。 メインの見出し行の列数は、データの列数と 必ず 同じでなければなりません。 他の見出し行は、複合列を扱うために "colspan" タグを含むかも知れません。 複合見出し行を持つならば、唯一無二の一行だけが、メインの行として指定されるかもしれません。

      ex1.AddHeadingRow(true)
      for c=1 to numcol
        ex1.AddCell("Column " & c)
      next
    

  • グリッドデータセクションを実装して下さい。 どこででも AddDataRow() を呼んで、通常は、標準的な html テーブルに <tr> タグを配置します。 どこででも AddCell() を呼んで、<td> タグを配置します。

      for r=1 to 100
        ex1.AddDataRow()
        ex1.AddCell(r)
        for c=2 to numcol
          ex1.AddCell("Cell " & r & ":" & c)
        next
      next
    

  • 他のプラグインと違い、.net コントロールにより自動的にレンダリングされます。
• 最後に、利用されるプラグインに関係なく javascript SimpleGrid オブジェクトを 初期化する必要があります（クライアントサイド）：

  <script type='text/javascript'>
  Rico.loadModule('SimpleGrid','greenHdg.css');
  
  Rico.onLoad( function() {
    var opts = {  
      columnSpecs: ['specQty']  // display first column as a numeric quantity
    };
    var ex1=new Rico.SimpleGrid ('ex1', opts);
  });
  </script>
  

利用モデル 2: XSLT 変換の利用

ウェブページが XHTML 対応であるなら、ページ上の標準的な html テーブルを、 "ricoSimpleGrid.xsl" XSL スタイルシートを利用した SimpleGrid にする事が可能です。 一時、Rico はクライアントでこの変換をする事をサポートしていました。 しかし、Prototype ライブラリの変化により、これは既に可能でありません。 したがって、このアプローチを使う方を選ぶなら、XSLT 変換は 必ず サーバで実行されなければなりません。 サーバサイド変換を行うインストラクション。

• PHP5 を利用して
• .net を利用して

この変換は "ricoSimpleGrid" クラスでテーブルをコンバートするだけです。

<table id='test1' class='ricoSimpleGrid'>

固定された列の見出しは、 <th> タグに class="ricoFrozen" を持たなければなりません。 複合見出し行があるならば、メインの見出し行は "_main" で終わる id を持たなければなりません （これは、リサイズハンドルを表示する行です）。 その変換は、テーブルの <thead> セクションでグリッドの見出しを探します。 thead セクションが存在しないなら、その変換はテーブルの最初の行が見出し列であると仮定します。

<table id="test1" class="ricoSimpleGrid">

  <thead>
     <tr id="customer_livegrid_main">
        <th class="ricoFrozen">ID</th>
        <th>Customer</th>
        <th>Address</th>
        <th>City</th>
     </tr>
  </thead>

  <tbody>
    <!-- grid data -->
  </tbody>
</table>

最後に、SimpleGrid javascript オブジェクトは、CDATA セクションで宣言と初期化が行われなければなりません。 ricoInit() の呼び出しは、XSLT 変換によって生成されます。

<script type="text/javascript">
//<![CDATA[

function ricoInit() {
  try {
  Rico.loadModule('SimpleGrid');
  Rico.onLoad(ricoInit2);
  } catch(e) { alert(e.message); }
}

var grid1
function ricoInit2() {
  try {
  grid1=new Rico.SimpleGrid ('test1',{maxHt:180});
  } catch(e) { alert(e.message); }
}
//]]>
</script>

リファレンス

コンストラクタ

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

• table_id は、LiveGrid によって実装されるテーブルの DOM id です
• grid_options（下記参照）

オプション

一般的なオプション

frozenColumns

グリッドの左側の固定された列の数（デフォルトは 0）

maxHt

SimpleGrid の高さの最大ピクセル（デフォルトは null）

windowResize

window.resize イベントでグリッドをリサイズしますか？ アコーディオンに埋め込まれる時は false を設定して下さい（デフォルトは true）

useUnformattedColWidth

グリッドの構成時に、html テーブルの列幅を利用しますか？（デフォルトは true）

scrollBarWidth

実際にはスクロールバーの幅を変えず、位置決めで使用されます。（デフォルトは 19）

minScrollWidth

固定された列の幅がクライアントウィンドウの幅を上回る時、 スクロールしている列の幅の合計がどのくらい広がるべきですか？

highlightElem

グリッドで何がハイライトされますか。取り得る値は。

• cursorRow - カーソルの下のグリッドの行
• cursorCell - カーソルの下のグリッドのセル
• menuRow - ユーザがグリッドのコンテキストメニューを開く時に関連のある行
• menuCell - ユーザがグリッドのコンテキストメニューを開く時に関連のあるセル
• selection - ユーザによって選択されるセル
• none - 何もハイライトされない（デフォルト）

exportWindow

ユーザがグリッドからデータをエクスポートする時 window.open() に渡されるオプション文字列。 （デフォルトは "height=300,width=500,scrollbars=1,menubar=1,resizable=1"）

画像

resizeBackground

列のリサイズハンドルに利用される画像（デフォルトは 'resize.gif'）

sortAscendImg

列を昇順でソートする事を示すために使われる画像（デフォルトは 'sort_asc.gif'）

sortDescendImg

列を降順でソートする事を示すために使われる画像（デフォルトは 'sort_desc.gif'）

メニューとイベントハンドリングオプション

contextmenu

ユーザがグリッドのセル上で右クリックした時に取る行動（デフォルトは null）

menuEvent

メニューのトリガーイベント。取り得る値は。

• click
• dblclick （デフォルト）
• contextmenu
• none

click

ユーザがグリッドのセル上でシングルクリックした時に取る行動（デフォルトは null）

dblclick

ユーザがグリッドのセル上でダブルクリックした時に取る行動（デフォルトは null）

クッキーオプション

saveColumnInfo

グリッドのクッキーに、どの詳細設定を保存するかを指定します。 一つのクッキーだけが、それぞれのグリッドのために利用されます。 幅の設定が、列の非表示／表示の状態を含む事に注意して下さい。（デフォルトは {width:true, filter:false, sort:false}）

cookiePrefix

クッキー名の先頭に付け加えられる文字列（デフォルトは 'RicoGrid.'）

cookieDays

数字の日数前のクッキーは期限切れになります。 指定しなければ、クッキーは現在のセッションの間だけ維持されます。（デフォルトは null）

cookiePath

グリッドのクッキーを読む事が出来るトップレベルディレクトリを設定します。 指定しなければ、それはクッキーを設定するページのパスになります。（デフォルトは null）

cookieDomain

クッキーがどのドメインに送られなければならないかについて、ブラウザに知らせます。 指定しなければ、それはクッキーを設定するページのドメインになります。（デフォルトは null）

デフォルトの列

これらのアイテムはそれぞれ、 columnSpecs オプションによって、列ごとのベースにオーバーライドする事が出来ます。

canSortDefault

列はデフォルトでソート可能ですか？（LiveGrid のデフォルトは true、SimpleGrid のデフォルトは false）

canFilterDefault

列をフィルタする事が出来ますか？ （LiveGrid のデフォルトは RicoBuffer.options.canFilter、SimpleGrid のデフォルトは false）

canHideDefault

列を 表示／非表示 する事が出来ますか？（デフォルトは true）

allowColResize

ユーザによる列のリサイズを許しますか？ （デフォルトは true）

defaultWidth

それぞれの列のデフォルトのピクセル幅

列ごとの構成

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

• null （デフォルト） -- その場合、Rico.TableColumn.DEFAULT. の仕様によって列はフォーマットされます。
• a string -- あらかじめ定義されたフォーマットの内の一つを定義します：QTY、PERCENT、DOLLAR、または EURO
• an object -- 下記の表にあるプロパティの一つ以上のエントリを含みます。

ここに、列 0、1 と 3 が仕様を含む例を挙げます。

columnSpecs : [{noResize:true, ClassName:'alignright'},
               {ClassName:'aligncenter'},
               ,
               {visible:false}]

canHide

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

visible

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

width

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

noResize

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

ClassName

必要に応じて、これを 'alignright' または 'aligncenter' にセットして下さい - 例を見て下さい。 これが見出しを整列しない事に注意して下さい - ヘッダの整列を達成するためには、<th> タグで align="right" を利用して下さい。 （デフォルトは table_id + '_col' + column_index）