Ajaxフレームワーク UI部品リファレンス

2.3.10 ViewColumnImage

ViewColumnImageは、DataGridのテーブルで指定した列に画像ファイルを配置する部品です。

• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API

ViewColumnImageは、Internet Explorerでだけ利用可能な部品です。

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
    ...
    <div rcf:type="ViewColumnImage" rcf:name="img1" rcf:propertyName="img" rcf:label="イメージ"></div>
    ...
</div>

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
name	String	カラムの名前を指定します。 DataGridにあるViewColumnGrid、ViewColumnCheck、ViewColumnTree、ViewColumnSelect、ViewColumnImage内で、一意の値を指定してください。一意でない値を指定した場合、エラーになります。	不可	−	値	不可	不可
propertyName	String	モデルに指定した配列データに含まれるオブジェクトの持つプロパティのうち、表示画像のURLが指定されているプロパティ名を指定します。 URLには、クエリ文字列およびURLリライティングで用いるセションIDを付加することができます。詳細は、“ユーザーズガイド”を参照してください。 セル単位で画像を非表示にする場合は、該当オブジェクトにnullを指定します。	可	−	バインド	可	可
label	String	列ヘッダ部に表示する文字列を指定します。	可	nameプロパティの値	値	不可	不可

• 配置列に対して、編集はできません。
• 配置列に対して、ソートはできません。

ViewColumnGridのプロパティも指定できます。詳細は、“ViewColumnGrid”の“プロパティ”を参照してください。

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

ViewColumnImageの指定方法

以下に例を示します。

...
<script type="text/javascript">
//<![CDATA[
  var modelData = {
    scores: [
      { id: 'ID0001',  img: 'http://xxx/xxx/img/xxx.gif', score: 90 },
      { id: 'ID0002',  img: null,                    score: 80 },
      { id: 'ID0003',  img: 'http://xxx/xxx/img/xxx.gif',  score: 100 }
    ]
  }
//]]>
</script>
...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.scores}">
    <div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="id" rcf:label="ID"></div>
    <div rcf:type="ViewColumnImage" rcf:name="img1" rcf:propertyName="img" rcf:label="イメージ"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="score" rcf:label="スコア">
      <div rcf:type="NumberInput"></div>
    </div>
</div>
...

上記の指定を行った場合の画像の表示は、以下のようになります。

■スタイルプロパティ

ViewColumnGridのスタイルプロパティと同様です。“ViewColumnGrid”の“スタイルプロパティ”を参照してください。

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。