TreeGrid を使ってグリッド機能を Web にコーディングなくらくらく実装

先月に販売を開始した TreeGrid 製品を知っていますか。TreeGrid 製品は、Ajax を使用した 100% ピュアな JavaScript の DHTML コンポーネントです。各製品の詳細については、弊社 Web サイトをチェックしてください。

今回のブログでは、とっても簡単なグリッドの実装方法を紹介していきたいと思います。

まだ、無償体験版をダウンロードされていない方は、こちらより今すぐお申込みいただくとすぐにダウンロードしていただけます。

また、日本語スタート ガイドも用意しておりますので、こちら「TreeGrid 日本語スタート ガイド (PDF)」よりご確認ください。

準備が整えば、さっそく以下のようなグリッド機能を実装していきます。

こちらのソースは、体験版パッケージ内の 01-Basic_grid.html (Tutorials\Basic\01-Basic_grid.xml) になります。

<Grid>
<Cfg id="Basic"/>
 <!-- - Columns  -->
<Panel Visible="1"/>
<LeftCols>
<C Name="LEFT1" Width="150"/>
</LeftCols>
<Cols>
<C Name="DATA1"/>
<C Name="DATA2"/>
</Cols>
<RightCols>
<C Name="RIGHT1"/>
</RightCols>
 <!--  Rows  -->
<Header LEFT1="Left column 1" DATA1="Data column 1" DATA2="Data column 2" RIGHT1="Right column 1" Visible="1"/>
<Head>
<I LEFT1="Fixed head row 1" DATA1="1" DATA2="2" RIGHT1="3"/>
</Head>
<Body>
<B>
<I LEFT1="Body row 1" DATA1="4" DATA2="5" RIGHT1="6"/>
<I LEFT1="Body row 2" DATA1="7" DATA2="8" RIGHT1="9"/>
<I LEFT1="Body row 3" DATA1="10" DATA2="11" RIGHT1="12"/>
<I LEFT1="Body row 4" DATA1="13" DATA2="14" RIGHT1="15"/>
<I LEFT1="Body row 5" DATA1="16" DATA2="17" RIGHT1="18"/>
<I LEFT1="Body row 6" DATA1="19" DATA2="20" RIGHT1="21"/>
<I LEFT1="Body row 7" DATA1="22" DATA2="23" RIGHT1="24"/>
</B>
</Body>
<Foot>
<I LEFT1="Fixed foot row 1" DATA1="25" DATA2="26" RIGHT1="27"/>
</Foot>
<Toolbar Visible="1"/>
</Grid>

XML 内のそれぞれのタグを確認していきます。

TreeGrid XML

  • すべてのグリッド XML は、<Grid>…<Grid> タグ内で定義されています。<Grid> タグが TreeGrid XML 内で唯一のルート タグになります。
  • もっとも簡単な空白なグリッドは、<Grid><Body></B></Grid> で作成できます。行や列がない空白なページを作成します。
  • TreeGrid の基本的な設定は <Cfg/> タグ内で定義されています。
  • XML の代わりに JSON フォーマットも使用することができます。タグや属性の名前は XML フォーマットと同じになります。

行

  • TreeGrid は、行を基本とするグリッドになります。行内でデータが定義されます。振り分け、グループ、絞り込みなどの機能を行に対してのみ使用できます。
  • 行変数は、<Body><B>…</B></Body> 内の <|> タグで定義できます。
  • 固定行は、<Head>....</Head> と <Foot>…</Foot> タグ内で定義できます。

列

  • 列は名前、位置、セルの幅等を定義します。行は、セルの属性を定義することもできます。
  • 列変数は、<Cols></Cols> タグ内の <C> で定義できます。
  • 固定列は、<LeftCols></LeftCols> および <RightCols></RightCols> タグ内の <C> タグで定義できます。

セル

  • セルのデータは列内ではなく行内で定義されます。
  • セルの値は、名前付き列の属性とともに <|> タグとして定義されます。例えば、<| Col1=’10’ Col2=’20’/>
  • すべてのセルの属性 (列のサイズや位置などを除く) は、すべての列 (<C> タグ内: 例) <C Name=’Col1’ Type=’Int’ Format = ‘0.00’/> )　またはぞれぞれのセル (列の名前と属性の名前を示す <I> タグ内; 例) <I Col1Type=’Int’ Col1Format=’0.00’ Col1=’10’/>) に対して定義されます。

事前に定義されたアイテム

  • Header
  • Toolbar
  • Panel
  • Pager

上記内容を踏まえたうえで再度 XML ファイルをご確認ください。このように、TreeGrid はExcel 互換の編集が可能な JavaScript グリッド ライブラリになるため、自由自在に編集していただくことができます。

TreeGrid 製品の詳細は、弊社 Web サイトをご確認ください。

タイトルとURLをコピーしました