wijgallery ウィジェットでは、ユーザーは外部ソースからコンテンツを表示できます – これには、ギャラリーイン タフェース内でインタラクティブ操作できる Web ページの表示が含まれます。例については、Web サイト
（http://demo.componentone.com/ASPNET/MVCExplorer/gallery/Iframe）にアクセスし、MVC コントロール エクスプローラの Gallery > Iframe サンプルのライブデモをご覧ください。
外部コンテンツを表示するには、以下の手順を実行します。
1. ASP.NET MVC 3 Wijmo アプリケーション を作成します。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="wijgallery" class="">
<ul class="">
<li class=""><a href="http://www.yahoo.com/"><img
src="http://cdn.wijmo.com/images/yahoo_thumb.png" title="Yahoo" alt="Yahool" /></a></li>
<li class=""><a href="http://www.componentone.com"><img
src="http://cdn.wijmo.com/images/componentone_thumb.png" title="ComponentOne"
alt="ComponentOne" /></a> </li>
<li class=""><a href="http://www.microsoft.com"><img
src="http://cdn.wijmo.com/images/microsoft_thumb.png" title="Microsoft" alt="Microsoft"
/></a></li>
</ul>
</div>
このマークアップは、Web サイトのコンテンツを含むページに１つのギャラリーウィジェットを追加します。次 の手順では、ギャラリーを初期化します。
4. 前の手順で追加した </div> 終了タグの後に、以下の jQuery スクリプトを入力して wijgallery ウィジェットを初 期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#wijgallery,#wijgallery2").wijgallery({
showControlsOnHover:false, thumbsDisplay: 4,
thumbsLength: 100, mode:"iframe", showCaption:false, showTimer:false });
});
</script>
<style type="text/css">
#wijgallery {
width:750px;
height:500px;
}
</style>
上記のスクリプトとマークアップはギャラリーを初期化し、ギャラリーのスタイルを設定します。
このトピックの作業結果
［F5］を押してアプリケーションを実行し、ギャラリーに Web サイトのコンテンツが含まれていることを確認し ます。現在表示されている Web サイトを変更するには、〈次へ〉または〈前へ〉ボタンを押します。
Wijgrid
wijgrid ウィジェットは、ユーザーによるデータの選択、編集、ソート、スクロール、フィルタリング、およびグル ープ化のインタラクティブ操作が可能な表形式のデータグリッドです。高度にカスタマイズ可能なグリッドを使用す ると、データをより理解しやすくし、より効果的に視覚化できます。
wijgrid は、テーブル DOM 要素を使用します。wijgrid ウィジェットの作成に使用されるマークアップは次のよう になります。
<table></table>
wijgrid がテーブル自身をデータソースとして使用する場合、テーブルにデータ行と、オプションで列ヘッダーを格 納する <thead> セクションが含まれている必要があります。たとえば、次のようになります。
<table class = "table1">
<thead>
<tr>
<th>列 0</th>
<th>列 1</th>
<th>列 N</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル 00</td>
<td>セル 01</td>
<td>セル 0N</td>
</tr>
<tr>
<td>セル 10</td>
<td>セル N0</td>
<td>セル NN</td>
</tr>
</tbody>
</table>
セルは colspan および／または rowspan 属性を含むことができないため、セルと行の属性とスタイルは無視され ます。
上でテーブルを追加し、次のコードで、グリッドを表示する ビューの .cshtml ファイル内で wijgrid を初期化でき ます。
$("#table-element").wijgrid({
data： [[0, "a"], [1, "b"], [2, "c"]]
});
ここで、wijgrid の allowPaging と allowSorting オプションを使用し、ページングと列ソートを許可します。
<script type="text/javascript">
$(document).ready(function () { $(".table1").wijgrid({
allowPaging: true, allowSorting: true });
});
</script>
MVC アプリケーションを実行すると、wijgrid はこのような表示になります。
関連項目：
wijgrid の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
Wijgrid 依存関係
Wijgrid オプション
Wijgrid イベント
Wijgrid メソッド
Wijgrid チュートリアル
このチュートリアルでは、MVC 3 wijgrid のモデル、ビュー、コントローラーの作成方法について学びます。以下の トピックでは、MVC プロジェクトを作成した後、ComponentOne wijgrid ウィジェットで、Razor 構文を使用し てテーブルにバインドデータを移植し、テーブルを書式設定されたグリッドに変換します。
注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。