| MVC Classic ウィジェット > Wijdatasource > Wijdatasource チュートリアル > 手順 2：ウィジェットの初期化 |
前の手順では、マークアップを追加し、データソースページに表示するコンテンツを追加しました。この手順では、必要な jQuery スクリプトを追加し、ウィジェットを初期化します。
以下の手順を実行します。
</div> タグの後に、次の jQuery スクリプトを入力して、wijdatasource ウィジェットを初期化します。
| ソースビュー |
コードのコピー
|
|---|---|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
var superPanelRefreshed = false;
var proxy = new wijhttpproxy({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: 'ab'
},
key: 'geonames'
});
var myReader = new wijarrayreader([{
name: 'label',
mapping: function (item) {
return item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName
}
}, {
name: 'value',
mapping: 'name'
}, {
name: 'selected',
defaultValue: false
}]);
var list = $("#list");
var input = $('#testinput');
list.wijlist({
selected: function (event, ui) {
var item = ui.item;
input.val(item.value);
list.wijlist('deactivate');
}
});
datasource = new wijdatasource({
reader: myReader,
proxy: proxy,
loading: function () {
input.addClass('wijmo-wijcombobox-loading');
},
loaded: function (data) {
list.wijlist('setItems', data.items);
list.wijlist('renderList');
list.wijlist('refreshSuperPanel');
input.removeClass('wijmo-wijcombobox-loading');
}
});
datasource.load();
input.bind("keydown.wijcombobox", function (event) {
var keyCode = $.ui.keyCode;
switch (event.keyCode) {
case keyCode.UP:
list.wijlist('previous', event);
// 一部のブラウザでテキストフィールドの先頭へのカーソルの移動を禁止
event.preventDefault();
break;
case keyCode.DOWN:
if (!list.is(':visible')) {
list.show();
return;
}
list.wijlist('next', event);
// 一部のブラウザでテキストフィールドの末尾へのカーソルの移動を禁止
event.preventDefault();
break;
case keyCode.ENTER:
event.preventDefault();
list.wijlist('select', event);
break;
case keyCode.PAGE_UP:
list.wijlist('previousPage');
break;
case keyCode.PAGE_DOWN:
list.wijlist('nextPage');
break;
default:
break;
}
});
});
function loadRemoteData() {
datasource.proxy.options.data.name_startsWith = $('#testinput').val();
datasource.load();
</script>
|
|
このスクリプトは、リストとボタンを初期化し、wijdatasource を使用してリモートデータをリストにロードします。
Tアプリケーションを作成し、wijdatasource ウィジェットを追加して初期化しました。次の手順 「手順 3：プロジェクトの実行」では、ウィジェットの実行時のインタラクティブ操作を表示します。