Wijdatasource タスク別ヘルプ
var myReader = new wijarrayreader([
{
name: 'label',
mapping: function (item){
return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
} },
{name: 'value',mapping: 'name'}]);
// データソースを作成します。
var datasource = new wijdatasource({
reader: myReader, proxy: proxy,
loaded: function (data){
// 項目を読み込ます。
var items = data.items;
} });
// ロードをトリガーします。
datasource.load();
Wijdatepager
wijdatepager ウィジェットは、特定の時間間隔ビュー（日／週または月）を使用してユーザーが日付をすばやく 選択できる水平 UI コントロールです。デフォルトでは、wijdatepager は現在の日付を選択された日付として使用 して、日ビューを表示します。wijdatepager ウィジェットは、jquery.wijmo.wijdatepager.js ライブラリによっ て作成されます。
次の例のように、wijdatepager にはコンテンツが含まれます。
<div id="datepager" style="margin-top:20px"></div>
次のようなスクリプトで、wijdatepager を初期化できます。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#datepager").wijdatepager();
});
</script>
関連項目：
wijdatepager の詳細については、次の外部リンクの１つをクリックして、Wijmo wiki マニュアルをご覧ください。
wijdatepager 依存関係
wijdatepager オプション
wijdatepager イベント
wijdatepager メソッド
Wijdatepager チュートリアル
以下のチュートリアルでは、datepager ウィジェットを含む MVC プロジェクトの作成手順について説明します。
注意：このチュートリアルでは、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細に ついては、「MVC Classic プロジェクトの作成」トピックを参照してください。
手順 1：ビューの設定
この手順では、最初にビューを設定します。コンテンツを日付ページャに追加します。
注意：この手順では、MVC ツールバープロジェクトを作成済みであることを前提にしています。詳細については、
「MVC Classic プロジェクトの作成」トピックを参照してください。
以下の手順を実行します。
1. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
2. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="datepager1" class="ui-corner-all"></div>
このマークアップは datepager のコンテンツをページに追加します。
この手順では、ビューを作成しました。次の手順「手順 2：ウィジェットの初期化」では、スクリプトを追加し、ウ ィジェットを初期化します。
手順 2：ウィジェットの初期化
前の手順では、マークアップを追加し、datepager に表示するコンテンツを追加しました。この手順では、ウィジ ェットを初期化するために必要な jQuery スクリプトを追加します。
以下の手順を実行します。
1. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力して、wijdatepager ウィジェッ トを初期化します。
<script id="scriptInit" type="text/javascript">
$(document).ready(function () { $("#datepager").wijdatepager();
});
</script>
このスクリプトはウィジェットを初期化します。
アプリケーションを作成し、wijdatepager ウィジェットを追加して初期化しました。次の手順「手順 3：プロジ ェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。
手順 3：プロジェクトの実行
前の手順では、アプリケーションを作成し、wijdatepager ウィジェットを追加して初期化しました。この手順で は、ウィジェットの実行時のインタラクティブ操作を確認します。
以下の手順を実行します。
1. ［F5］を押して、アプリケーションを実行します。アプリケーションと wijdatepager は次のように表示されま す。
2. 前または次の月の名前をクリックし、表示される月を変更します。
3. 日をクリックし、選択された日付を変更します。
このチュートリアルでは、wijdatepager ウィジェットをアプリケーションに追加して、実行時のウィジェットを 観察しました。
Wijdatepager タスク別ヘルプ
DatePager ビュータイプの設定
wijdatepager ウィジェットは、日、週、月の複数のビュータイプをサポートします。この機能を利用するには、
viewType オプションを設定するだけです。
ビュータイプを設定するには、以下の手順を実行します。
1. 新しい ASP.NET MVC 3 Wijmo アプリケーションを作成します（「MVC Classic プロジェクトの作成」を参照 してください）。
2. ソリューションエクスプローラに移動して、Views フォルダ内の Shared フォルダを展開し、_Layout をダブ ルクリックしてファイルを開きます。
3. 以下のマークアップを、@RenderBody() のすぐ後のページの <body> タグ内に追加します。
<div id="datepager"></div>
このマークアップは datepager ウィジェットのコンテンツをページに追加します。次の手順では、datepager を 初期化します。
4. 前の手順で追加した終了の </div> タグの後に、次の jQuery スクリプトを入力し、wijdatepager ウィジェット を初期化して、viewType オプションを設定します。
<script type="text/javascript">
$("#datepager").wijdatepager({ viewType: "month" });
</script>
実行時に、日付ページャに月ビュータイプが表示されます。
このトピックの作業結果
［F5］を押して、アプリケーションを実行します。日付ページャに月ビュータイプが表示されることに注意してく ださい。