3.2.2. TMTable¶
前項のGadgetではガジェットの仕様を解説しました。本項では、ガジェットの内包要素であるTMTableの仕様を解説します。
3.2.2.1. TMTableとは？¶
TMTableとは、いわゆる帳票形式で表現する場合に利用するブロックです。動的に入力欄を増やしたり、一覧表示を行う際に使用します。次の画面では、TMTableを利用して機能を実現しています。
3.2.2.2. TMTableのプログラミング¶
TMTableは、タグライブラリのTMTable <k:tmtable>を使用します。TMTable <k:tmtable>は、<table>に変換されますので、基本的なプログラミング方法は<table>と同様ですが、<thead>と<tbody>を明確に分けて作成してください。
3.2.2.3. タプルとは？¶
タプル、またはタプルIDは次の様に定義しています。
3.2.2.4. タプル操作のプログラミング¶
JavaScriptにてタプル操作を行う場合のプログラミング方法を解説します。次の様な実装で、タプルに対する各種操作が行えます。
コラム
タプル操作の詳細は、『intra-mart Accel Kaiden! JsDoc』を参照してください。
3.2.2.5. TMTable操作パネル¶
ユーザ操作で行追加や行削除などを行う場合はTMTable操作パネル <k:tmtableOperationPanel>を使用してください。次の様にTMTable操作パネル <k:tmtableOperationPanel>を配置するだけで、行追加・行削除などのタプルに対する基本的な操作が行えます。
3.2.2.6. TMTableの関連API¶
本項では、TMTableのタプルの操作やデータの設定・取得の方法を紹介します。各APIの詳細は『intra-mart Accel Kaiden! JsDoc』を参照してください。
3.2.2.6.1. タプルへのデータ設定¶
タプル内のエレメント（テキストボックスなど）に値を設定する場合には、次のAPIを使用してください。
コラム
次のソースは、TMTableに行を追加し、text1に”txt1”をtext2に”txt2”を設定する例です。excludeにtext3が指定されているため、text3は値が設定されません。// TMtableの取り出し var tmtable = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"]; //タプルを追加するとともにデータを設定 tmtable.append({text1:"txt1", text2:"txt2", text3:"txt3"}, {text3:true});
3.2.2.6.2. タプルのデータ取得¶
タプルのデータを取得する場合には、次のAPIを使用してください。
3.2.2.6.3. タプルのイベント処理¶
タプルのイベント処理は次の様に実装してください。
// TMtableの取り出し var tmtable = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"]; //タプル追加（挿入）直前イベント tmtable.addEventPreNewRow(function(tupleId, tmtableAccessor) { //引数：tupleId ：挿入起点となるタプルID //引数：tmtableAccessor：当該TMtableへのAccessor });// TMtableの取り出し var tmtable = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"]; //タプル追加（挿入）直後（データ設定前）イベント tmtable.addEventPostNewRowBeforeSetData(function(tupleId, tmtableAccessor, data) { //引数：tupleId ：新たに挿入されたタプルID //引数：tmtableAccessor：当該TMtableへのAccessor //引数：data ：挿入されたタプルに設定しようとしている値 });// TMtableの取り出し var tmtable = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"]; //タプル追加（挿入）直後（データ設定後）イベント tmtable.addEventPostNewRow(function(tupleId, tmtableAccessor, data) { //引数：tupleId ：新たに挿入されたタプルID //引数：tmtableAccessor：当該TMtableへのAccessor //引数：data ：挿入されたタプルに設定された値 });// TMtableの取り出し var tmtable = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"]; //タプル削除時イベント tmtable.addEventDecreaseRowFunc(function() { });