1.3.0.0以上

説明

onDX5CompressWaitingBegin 関数は、圧縮ダウンロードの開始時に呼び出されるコールバック関数です。

function onDX5CompressWaitingBegin(id) {
    ...
}

形式

# グローバルでイベントハンドラを宣言
function onDX5CompressWaitingBegin(id) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        compressWaitingBegin: function(id) { ... }
    }
});                               

パラメータ

1.3.0.0以上

説明

onDX5CompressWaitingCompleted 関数は、圧縮作業が完了すると呼び出されるコールバック関数です。

function onDX5CompressWaitingCompleted(id) {
    ...
}

形式

# グローバルでイベントハンドラを宣言
function onDX5CompressWaitingCompleted(id) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        compressWaitingCompleted: function(id) { ... }
    }
});

パラメータ

1.3.0.0以上

説明

onDX5CompressWaitingStopped 関数は、圧縮要求が強制的に停止した後に呼び出されるコールバック関数です。

function onDX5CompressWaitingStopped(id) {
    ...
}

もし圧縮過程が終わって、対象のファイルがダウンロードされる過程であれば、onDX5CompressWaitingStopped関数が呼び出されても、ダウンロードのプロセスまでキャンセルされない。

形式

# グローバルでイベントハンドラを宣言
function onDX5CompressWaitingStopped(id) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        compressWaitingStopped: function(id) { ... }
    }
});

パラメータ

1.4.1.0以上

説明

onDX5DragAndDrop関数は、ドラッグ＆ドロップ操作をするときは、ファイルのエントリをドロップすると呼び出されるコールバック関数である。

function onDX5DragAndDrop(id) {
    ...
}

onDX5DragAndDrop関数は、アイテムがドロップされたときに発生するが、項目を追加する前後を区別する用途に使用することができず、単にドロップアクションが起こったことを知らせる目的でのみ提供される。

ドロップした後、ファイルの追加情報を知るには、onDX5ItemsAddedコールバック関数を使用する必要がある。

形式

# グローバルでイベントハンドラを宣言
function onDX5DragAndDrop(id) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        dragAndDrop: function(id) { ... }
    }
});

パラメータ

3.2.0.0以上

説明

onDX5ColumnDataBinding関数は、各列に表示されるコンテンツをGRIDスタイルで表現するために呼び出されるコールバック関数です。

GRIDスタイルでは、列に画面上の各アイテムのメタデータ値がそのまま表示されます。 ただし、仮想ファイルとは異なり、ローカルファイルはメタ属性を使用して追加時にメタデータを設定することはできません。

onDX5ColumnDataBinding関数を使用すると、アイテムのメタデータステータスに応じて適切に表現できます。

function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) {
    if (columnKey == "composer" && columnValue == null) return "Unknown";
    else if (columnKey == "country" && columnValue == null) return "Unknown";
}

形式

# グローバルでイベントハンドラを宣言
function onDX5ColumnDataBinding(id, itemId, columnKey, columnValue) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        columnDataBinding: function(id, itemId, columnKey, columnValue) { ... }
    }
});

パラメータ

4.1.0.0以上

説明

onDX5ColumnDataDisplayingは、GRIDスタイルの各カラムの出力を変化させるために呼び出されるイベントハンドラです。

GRIDスタイルでは、カラムはテキストか単純なHTMLコードしか表示できませんが、onDX5ColumnDataDisplaying関数により、カラムの出力を変化させることができます。

// 「movie 」カラムの場合、テキストを赤色で表示します。
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
    if (columnKey === "movie") {
        return `<span style='color: red;'>${columnValue}</span>`;
    }
}

// 「アクション」列の場合は、ボタンを作成し、クリック時にイベントを発生させます。
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) {
    if (columnKey === "action") {
        return Object.assign(document.createElement("button"), {
            type: "button",
            style: "padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f8f8f8; color: #333; font-size: 11px; cursor: pointer;",
            onclick: (ev) => {
                echo(itemId);
            },
            textContent: "Echo"
        });
    }
}

注意事項

• レンダリングされるHTML要素は外部CSSを使用できないため、style属性を使用してインラインで設定する必要があります。
• セルの左右には4pxのパディング領域があります。
• HTMLのinput[type=text]要素をレンダリングする際には、setEnableDeletionByKeyメソッドを使用してキーボードのdeleteイベントを無効にする必要があります。さもないと、入力フィールドでdeleteキーが使われた場合、テキスト以外の項目が削除される可能性があります。

形式

# グローバルでイベントハンドラを宣言
function onDX5ColumnDataDisplaying(id, itemId, columnKey, columnValue) { ... }

# コンポーネント生成時にイベントハンドラを登録する(3.10.0.0バージョン以上)
dx5.create({
    ...
    events: {
        columnDataDisplaying: function(id, itemId, columnKey, columnValue) { ... }
    }
});

パラメータ

リターン

• 出力を変更する必要がない場合は、何も返さないか、return文のみを使用する。
• textを返すと、そのテキストはHTML文字列とみなされ出力されます。
• HTMLオブジェクトを返すと、HTMLがセルにレンダリングされます。