TDGrid (TD그리드) Widget Control
TDGridウィジェットをスクリプトから制御するときに使用するWidget Control（Property・Method・Event）の一覧です。ウィジェットの紹介と使い方はTDGridドキュメントを参照してください。
備考
以下の例のtdgridIDは、キャンバスでTDGridウィジェットに指定した名前（ID）です。スクリプトではwidgetID.memberの形式でアクセスします。
Widget Control一覧
| Widget Control | 種類 | シグネチャ | 説明 |
|---|---|---|---|
count | Property | tdgridID.count | データ行数（読み取り/書き込み、int） |
current | Property | tdgridID.current | 現在（フォーカス）の行インデックス（読み取り/書き込み、int） |
select | Property | tdgridID.select | 選択されている行インデックス（読み取り/書き込み、int） |
add | Method | tdgridID.add() | 空の行を追加し、そのインデックスを返す |
insert | Method | tdgridID.insert(index) | 指定したインデックスに空の行を挿入 |
remove | Method | tdgridID.remove(index) | 指定したインデックスの行を削除 |
clear | Method | tdgridID.clear() | すべての行を削除 |
setState | Method | tdgridID.setState(index, function) | コールバックで指定した行のセルの値を更新 |
setColVisible | Method | tdgridID.setColVisible(orgIndex, isShow, isAnimation) | 列を1つ表示/非表示 |
setColVisibleGroup | Method | tdgridID.setColVisibleGroup(orgIndexes, isShow, isAnimation) | 複数の列を一度に表示/非表示 |
isColVisible | Method | tdgridID.isColVisible(orgIndex) | 列の表示状態を返す（bool） |
setColWidth | Method | tdgridID.setColWidth(orgIndex, width, isAnimation) | 列の幅を設定 |
getColWidth | Method | tdgridID.getColWidth(orgIndex) | 列の幅を返す（int、ない場合は0） |
sort | Method | tdgridID.sort(type, prop, isNumber, attrProp) | バインドされたプロパティの値を基準に行を並べ替え（bool） |
initOriginIndex | Method | tdgridID.initOriginIndex() | 各行に現在の位置を元のインデックスとして記録（bool） |
reorderColumn | Method | tdgridID.reorderColumn(colIndex) | 指定した列が先頭に来るように順序を並べ替え（bool） |
setRowVisible | Method | tdgridID.setRowVisible(orgRow, visible) | 行を1つ表示/非表示 |
isRowVisible | Method | tdgridID.isRowVisible(orgRow) | 行の表示状態を返す（bool） |
setRowColor | Method | tdgridID.setRowColor(orgRow, color) | 行の背景色を設定（空文字列の場合は解除） |
setRowBorder | Method | tdgridID.setRowBorder(orgRow, color, width, bottomOnly) | 行の枠線を設定 |
clearRowStyle | Method | tdgridID.clearRowStyle(orgRow) | 行の個別スタイルをすべて解除 |
setGroupHeader | Method | tdgridID.setGroupHeader(row, use, title, txtColor, bgColor) | 行のグループヘッダーを設定 — 現在のバージョンでは動作しません |
setRowHeight | Method | tdgridID.setRowHeight(row, height) | 行の高さを設定（height <= 0の場合は解除） |
calcTextLines | Method | tdgridID.calcTextLines(bulbID, colIdx, adjust) | 各行でセルのテキストの行数を計算（List<int>） |
getMaxTextWidth | Method | tdgridID.getMaxTextWidth(bulbID) | セルのテキストの最大レンダリング幅を返す（int、ない場合は-1） |
getScrollPos | Method | tdgridID.getScrollPos(isVert) | 現在のスクロール位置を返す（double） |
setScrollPos | Method | tdgridID.setScrollPos(isVert, pos) | スクロール位置を移動 |
onSelected | Event | tdgridID.onSelected = (index) => { ... } | 行が選択されたときに実行 |
onStartScroll | Event | tdgridID.onStartScroll = (isVertical, position) => { ... } | スクロール開始時に実行 |
onUpdateScroll | Event | tdgridID.onUpdateScroll = (isVertical, position) => { ... } | スクロール位置が変わるたびに実行 |
onStopScroll | Event | tdgridID.onStopScroll = (isVertical, position) => { ... } | スクロール停止時に実行 |
onScrollEnd | Event | tdgridID.onScrollEnd = (isVertical) => { ... } | スクロールが端に到達したときに実行 |
Property
count
グリッドのデータ行数です。読み取ると現在の行数を返し、書き込むと行数を設定します。
- 種類: Property（読み取り/書き込み）
- 型:
int
Example
const n = tdgridID.count;
tdgridID.count = 10;
current
現在（フォーカス）の行インデックスです。
- 種類: Property（読み取り/書き込み）
- 型:
int
Example
const cur = tdgridID.current;
tdgridID.current = 0;
select
選択されている行インデックスです。
- 種類: Property（読み取り/書き込み）
- 型:
int
Example
const sel = tdgridID.select;
tdgridID.select = 2;
Method
add
空の行を1つ追加します。
- Parameters: なし
- Returns:
int- 新しく追加された行のインデックス
Example
const row = tdgridID.add();
insert
指定したインデックスの位置に空の行を挿入します。
- Parameters:
index(int) - 挿入する行のインデックス - Returns: なし
Example
tdgridID.insert(0);
remove
指定したインデックスの行を削除します。
- Parameters:
index(int) - 削除する行のインデックス - Returns: なし
Example
tdgridID.remove(2);
clear
すべての行を削除します。
- Parameters: なし
- Returns: なし
Example
tdgridID.clear();
setState
指定した行をコールバックで更新します。コールバックはその行を引数として受け取り、セルの値を設定します。
- Parameters:
index(int) - 更新する行のインデックス /function- 行を引数として受け取るコールバック - Returns: なし
Example
tdgridID.setState(0, (row) => {
row.priceCell.text = "72,500";
});
setColVisible
元のインデックスで指定した列を1つ表示、または非表示にします。
- Parameters:
orgIndex(int) - 列の元の（定義順の）インデックス /isShow(bool) -trueで表示、falseで非表示 /isAnimation(bool、省略またはnullの場合はtrue) - 幅の切り替えアニメーションの有無 - Returns: なし
Example
tdgridID.setColVisible(2, false, true);
setColVisibleGroup
複数の列を元のインデックスの配列で指定し、一度に表示、または非表示にします。
- Parameters:
orgIndexes(配列) - 列の元のインデックスの配列 /isShow(bool) -trueで表示、falseで非表示 /isAnimation(bool、省略またはnullの場合はtrue) - アニメーションの有無 - Returns: なし
Example
tdgridID.setColVisibleGroup([1, 3, 5], false, true);
isColVisible
元のインデックスで指定した列が現在表示されているかを返します。
- Parameters:
orgIndex(int) - 列の元のインデックス - Returns:
bool- 表示中の場合はtrue
Example
const visible = tdgridID.isColVisible(2);
setColWidth
元のインデックスで指定した列の幅（論理ピクセル）を設定します。
- Parameters:
orgIndex(int) - 列の元のインデックス /width(double) - 目標の幅(px) /isAnimation(bool、省略またはnullの場合はtrue) - アニメーションの有無 - Returns: なし
Example
tdgridID.setColWidth(1, 80, true);
getColWidth
元のインデックスで指定した列の現在の幅(px)を返します。
- Parameters:
orgIndex(int) - 列の元のインデックス - Returns:
int- 列の幅(px)。列が存在しない場合は0
Example
const w = tdgridID.getColWidth(1);
sort
バインドされたプロパティの値を基準に行を並べ替えます。
- Parameters:
type(int) -0は元の順序、1は昇順、2は降順 /prop(文字列) - 並べ替えの基準となるプロパティのドット表記パス（例:"objet.text"）。typeが0の場合は無視されます /isNumber(bool) - 数値として扱う（比較前にマスク文字を除去） /attrProp(文字列) - プロパティのパス。ない場合は空文字列 - Returns:
bool- 並べ替えを実行した場合はtrue
Example
tdgridID.sort(2, "priceCell.text", true, "");
initOriginIndex
各行の元のインデックスのプロパティに現在の位置を記録し、後からsort(0, ...)で元の順序を復元できるようにします。
- Parameters: なし
- Returns:
bool（現在の実装では常にfalseを返します）
Example
tdgridID.initOriginIndex();
reorderColumn
colIndexに列挙した列が（指定した順序で）先頭に来るように、列の順序を並べ替えます。残りの列は相対的な順序を維持します。
- Parameters:
colIndex(配列) - 先頭に移動する列の元のインデックスの配列 - Returns:
bool- 並べ替えを実行した場合はtrue
Example
tdgridID.reorderColumn([3, 0, 1]);
setRowVisible
元のインデックスで指定した行を1つ表示、または非表示にします。
- Parameters:
orgRow(int) - 行の元の（データソースの）インデックス /visible(bool) -trueで表示、falseで非表示 - Returns: なし
Example
tdgridID.setRowVisible(3, false);
isRowVisible
元のインデックスで指定した行が現在表示されているかを返します。
- Parameters:
orgRow(int) - 行の元のインデックス - Returns:
bool- 表示中の場合はtrue
Example
const visible = tdgridID.isRowVisible(3);
setRowColor
行単位の背景色を設定します。空文字列を渡すと解除します。
- Parameters:
orgRow(int) - 行の元のインデックス /color(文字列) - 色の文字列（例:"#FF0000"）。""の場合は解除 - Returns: なし
Example
tdgridID.setRowColor(3, "#FFEEEE");
setRowBorder
行単位の枠線を設定します。bottomOnlyがtrueの場合は下辺の1辺のみ、そうでない場合は四辺すべてを描画します。colorが空文字列、またはwidthが0以下の場合は枠線を解除します。
- Parameters:
orgRow(int) - 行の元のインデックス /color(文字列) - 枠線の色（例:"#888888"）。""の場合は解除 /width(double) - 枠線の太さ(px)。0以下の場合は解除 /bottomOnly(bool) -trueで下辺のみ、falseで四辺すべて - Returns: なし
Example
tdgridID.setRowBorder(3, "#888888", 1, true);
clearRowStyle
行の個別スタイル（表示・高さ・背景・枠線）をすべて解除します。
- Parameters:
orgRow(int) - 行の元のインデックス - Returns: なし
Example
tdgridID.clearRowStyle(3); //3行目のスタイルを解除
setGroupHeader
警告
現在のバージョンでは動作しません。
行にグループヘッダーを設定します。
- Parameters:
row(int) - 行の元のインデックス /use(bool) - グループヘッダーを使用するかどうか /title(文字列) - ヘッダーのタイトル /txtColor(文字列) - 文字色 /bgColor(文字列) - 背景色 - Returns: なし
Example
tdgridID.setGroupHeader(0, true, "그룹", "#000000", "#EEEEEE");
setRowHeight
行単位の高さを設定します。heightが0以下の場合は設定を解除し、デフォルトの行の高さに戻します。
- Parameters:
row(int) - 行の元のインデックス /height(int) - 行の高さ(px)。0以下の場合は解除 - Returns: なし
Example
tdgridID.setRowHeight(3, 48);
calcTextLines
指定したセルのテキストが列の幅（＋補正値）の中で何行に折り返されるかを行ごとに計算し、行あたりの行数を返します。
- Parameters:
bulbID(文字列) - 測定するセルのID /colIdx(int) - 幅の基準となる列の元のインデックス /adjust(int) - 測定前に列の幅に加える補正値(px) - Returns:
List<int>- 行ごとの行数のリスト
Example
const lines = tdgridID.calcTextLines("nameCell", 0, -8);
getMaxTextWidth
指定したセルについて、すべての行のうち最も広い1行分のレンダリングテキストの幅(px)を返します。
- Parameters:
bulbID(文字列) - 測定するセルのID - Returns:
int- 最大のテキストの幅(px)。データがない場合は-1
Example
const maxWidth = tdgridID.getMaxTextWidth("nameCell");
getScrollPos
指定した軸の現在のスクロール位置(px)を返します。その軸がまだスクロールされていない場合は0を返します。
- Parameters:
isVert(bool) -trueで縦軸、falseで横軸 - Returns:
double- 現在のスクロールオフセット(px)
Example
const pos = tdgridID.getScrollPos(true);
setScrollPos
指定した軸のスクロール位置を、指定したオフセットに移動します（スクロール可能な範囲にclampされます）。その軸がまだスクロールできない場合は何も行いません。
- Parameters:
isVert(bool) -trueで縦軸、falseで横軸 /pos(double) - 目標のオフセット(px) - Returns: なし
Example
tdgridID.setScrollPos(true, 0);
Event
onSelected
行が選択されたときに実行されます。
- 種類: Event
- ハンドラー引数:
index- 選択された行のインデックス - Returns: なし
Example
tdgridID.onSelected = (index) => {
// 選択された行の処理
};
onStartScroll
スクロールが開始されたときに実行されます。
- 種類: Event
- ハンドラー引数:
isVertical- 縦スクロールの場合はtrue、横の場合はfalse/position- スクロール開始時点のオフセット(px) - Returns: なし
Example
tdgridID.onStartScroll = (isVertical, position) => {
// ...
};
onUpdateScroll
スクロールオフセットが変わるたびに継続して実行されます。
- 種類: Event
- ハンドラー引数:
isVertical- 縦スクロールの場合はtrue、横の場合はfalse/position- 現在のスクロールオフセット(px) - Returns: なし
Example
tdgridID.onUpdateScroll = (isVertical, position) => {
// ...
};
onStopScroll
スクロールが停止したときに実行されます。
- 種類: Event
- ハンドラー引数:
isVertical- 縦スクロールの場合はtrue、横の場合はfalse/position- スクロールが停止したオフセット(px) - Returns: なし
Example
tdgridID.onStopScroll = (isVertical, position) => {
// ...
};
onScrollEnd
スクロールがコンテンツの端（下/右）に到達したときに実行されます。
- 種類: Event
- ハンドラー引数:
isVertical- 縦軸が端に到達した場合はtrue、横の場合はfalse - Returns: なし
Example
tdgridID.onScrollEnd = (isVertical) => {
// ...
};
共通Widget Control（すべてのウィジェット）
注記
すべてのウィジェットは、setProperty／getProperty／setStylePropertyのような名前ベースの共通Widget Control（Method）を使用できます。共通リファレンスドキュメント（作成予定）を参照してください。