GRIDスタイルでカスタムカラムを設定する

ホーム > 基本的な例 > 例17

説明

GRIDスタイルのコンポーネントは'dx5.create'関数を使用してコンポーネントを作成する際に'style'プロパティを'grid'に設定することで作成できます。

GRIDスタイルはLISTと同じGUIを持ち、カスタムカラムの追加作成が可能です。

カスタムカラムには独自のキーが与えられ、これは各ファイルアイテムのメタデータ名と同じで、メタデータを使用して設定することができます。

'name、size、op'は文字列であり、キー値として使用することはできない。

// 'text'型のカスタム・カラムの作成
dx.createColumn({ key: "composer", display: "Composer", width: 80, position: 2 });
// 'list'型のカスタムカラムの作成
dx.createColumn({ key: "country", display: "Country", width: 80, position: 3, type: "list", items: [
        { display: "Austria", value: "AT" },
        { display: "Germany", value: "DE" },
        { display: "Italy", value: "IT" },
        { display: "Russia", value: "RU" },
        { display: "Etc.", value: "NN" }
    ]
});

// メタ・データは 'meta' プロパティを使って登録することができる。
dx.addVirtualFileList([
	{ ..., name: "Destiny.mp3", ..., meta: { "composer": "Austria", "country": "DE" } },
	{ ..., name: "Jupiter.mp3", ..., meta: { "composer": "Mozart", "country": "AT" } },
	{ ..., name: "Unfinished Symphony.mp3", ..., meta: { "composer": "Schubert", "country": "AT" } },
	{ ..., name: "Pathetic .mp3", ..., meta: { "composer": "Tschaikovsky", "country": "RU" } },
	{ ..., name: "The Four Seasons.mp3", ..., meta: { "composer": "Vivaldi", "country": "IT" } }
]);

リスト'タイプのカスタム列は、ドロップダウンリストのようなUIコンポーネントではありません。

カスタムカラムの追加

カスタムカラムを作成するには 'createColumn' メソッドを使用します。このメソッドは項目を追加する前にコールする必要があります。

カスタムカラムには'text'と'list'の2種類がありますが、この例では'text'のみを紹介します。

fileカラムのキーは'name'、sizeカラムのキーは'size'、statusカラムのキーは'op'である。

キー名が同じ場合、既存の設定は上書きされる。ただし、'name, size, op' は上書きできない。

キー
ヘッダーテキスト
幅(ピクセル)
位置(2から)
ヘッダー配置
アイテムの配置

Internet Explorerブラウザは、カラムの値としてテキストのみを表示できます。

値の登録

カスタムカラムの値を設定することは、メタデータを使用することと同じです。

addVirtualFileやaddVirtualFileListで仮想ファイルを登録する場合、メタデータは'meta'プロパティで設定できます。

ローカルファイルの場合、登録時に'meta'プロパティは使えないので、'setMetaDataByIndex'や'setMetaDataById'などのメソッドを使って手動で設定する必要がある(仮想ファイルも可能)。ローカルファイルの登録とカスタムカラム値の設定を同時に行いたい場合は、'onDX5ColumnDataBinding'というイベントハンドラを使用します。(詳しくはソースを参照してください。)

表示/非表示/削除

file(name)列は非表示、size(size)列とstatus(op)列は非表示にできる。

file(name)、size(size)、status(op)カラムは削除できない。

key