Wijmo UI for the Web
OData Web サービスの使用
| Wijmo ユーザーガイド > Data > 操作手順 > OData Web サービスの使用 |
クイックスタートの例を基に、Data モジュールを使用して、汎用 OData Web サービスに接続できます。
ドロップダウンからコードを貼り付けます
| ViewModel スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> $.support.cors = true; var viewModel; function ViewModel() { var productView = new wijmo.data.ODataView("http://services.odata.org/V2/Northwind/Northwind.svc/Products", { ajax: { dataType: "jsonp", data: { "$inlinecount": null }, }, pageSize: 10 }); productView.refresh(); this.products = productView; this.clearFilter = function () {productView.filter(null);}; this.filterBeverages = function () {productView.filter({ Category_ID: 1 });}; this.filterCondiments = function () {productView.filter({ Category_ID: 2 });}; this.sortId = function () {productView.sort("Product_ID");}; this.sortPrice = function () {productView.sort("Unit_Price desc, Product_Name");}; this.clearPaging = function () {productView.pageSize(0);}; this.setPaging = function () {productView.pageSize(10);}; this.prevPage = function () {productView.prevPage();}; this.nextPage = function () {productView.nextPage();}; } $(document).ready(function () { viewModel = new ViewModel(); ko.applyBindings(viewModel, $(".container").get(0)); }); </script> | |
ドロップダウンからコードを貼り付けます
| グリッドのマークアップ |
コードのコピー |
|---|---|
<h2>Data - Modifiable Remote Data</h2> <table> <tr> <th>Filter</th> <td> <button data-bind="click:filterBeverages, button: {}" type="button">Beverages</button> <button data-bind="click:filterCondiments, button: {}" type="button">Condiments</button> </td> </tr> <tr> <th>Sort By</th> <td> <button data-bind="click:sortId, button: {}" type="button">ID</button> <button data-bind="click:sortPrice, button: {}" type="button">Price, Name</button> </td> </tr> <tr> <th>Pages</th> <td> <button data-bind="click:clearPaging, button: {}" type="button">Clear Paging</button> <button data-bind="click:setPaging, button: {}" type="button">Page Size = 10</button> <button data-bind="click:prevPage, button: {}" type="button">Previous Page</button> <button data-bind="click:nextPage, button: {}" type="button">Next Page</button> </td> </tr> </table> <h3>Products</h3> <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, allowSorting: true, showFilter: true, allowPaging: true, pagerSettings: { position: 'top' }, columnsAutogenerationMode: 'none', columns: [ { headerText: 'ID', dataKey: 'ProductID' }, { headerText: 'Product Name', dataKey: 'ProductName' }, { headerText: 'Category ID', dataKey: 'CategoryID' }, { headerText: 'Unit Price', dataKey: 'UnitPrice', dataType: 'number', width: 200 } ] }" > </table> | |
全て展開
すべて折りたたむ