クイックスタート

全て展開

すべて折りたたむ

このクイックスタートガイドでは、Data モジュールを HTML プロジェクトに追加し、Knockout を使用してローカル配列のデータを Grid ウィジェットにバインドする方法について説明します。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、次の場所にあるコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

ドロップダウンして参照コードをコピーし、<head> タグ内に貼り付ける

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script>

HTML ページの <head> タグ内に、データ参照のリンクを追加します。

注意: wijmo.data.ajax.js は、OData を使用するために含める必要のある個別のファイルです。

ドロップダウンして参照コードをコピーし、<head> タグ内に貼り付ける

データレファレンス	コードのコピー
<!--Wijmo Ajax Data--> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <!-- Both of the links below can work --> <script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js" type="text/javascript"></script> <!--<script src="http://cdn.wijmo.com/amd-js/3.20173.128/knockout-3.1.0.js" type="text/javascript"></script>--> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script>

<body> タグ内に、次のようなマークアップを記述します。このマークアップでは、次のようなさまざまな処理を行います。

最初の <table> 要素では、この後のスクリプトで作成する各関数にバインドされる、多数のボタンを含めます。
2 番目の <table> 要素は、wijgrid ウィジェットであるビューを作成し、この後のスクリプトで作成するデータにバインドします。

ドロップダウンしてマークアップをコピーし、<body> セクションに貼り付ける

マークアップ	コードのコピー
<h2>Data - Modifiable Remote Data</h2> <table> <tr> <th>Filter</th> <td> <button data-bind="click: clearFilter">Clear</button> <button data-bind="click: filterBeverages">Beverages</button> <button data-bind="click: filterCondiments">Condiments</button> </td> </tr> <tr> <th>Sort By</th> <td> <button data-bind="click: sortId">ID</button> <button data-bind="click: sortPrice">Price</button> </td> </tr> <tr> <th>Pages</th> <td> <button data-bind="click: clearPaging">Clear Paging</button> <button data-bind="click: setPaging">Page Size = 4</button> <button data-bind="click: prevPage">Previous Page</button> <button data-bind="click: nextPage">Next Page</button> </td> </tr> <tr> <th>Modify</th> <td> <button data-bind="click: add">Add a Product</button> <button data-bind="click: deleteCurrent">Delete Selected Product</button> <button data-bind="click: doublePrice">Double Selected Price</button> </td> </tr> </table> <h3>Products</h3> <table id="demo-grid" data-bind="wijgrid: { data: products, allowEditing: true, allowPaging: true, showFilter: true }"> </table>

<head> タグ内の参照の下に、次のスクリプトを追加します。このスクリプトは以下を行います。

6 製品を表すローカル配列の作成
ViewModel の作成
フィルタのための関数の作成
並べ替えのための関数の作成
ページングのための関数の作成
修正のための関数の作成
Knockout バインディングを適用し、knockout.js を有効化

ドロップダウンしてスクリプトをコピーし、<head> セクションに貼り付ける

スクリプト	コードのコピー
<script type="text/javascript"> var viewModel; function sourceData() { return [ { "Product_ID": 1, "Product_Name": "Chai", "Category_ID": 1, "Quantity_Per_Unit": "10 boxes x 20 bags", "Unit_Price": 18.0 }, { "Product_ID": 2, "Product_Name": "Chang", "Category_ID": 1, "Quantity_Per_Unit": "24 - 12 oz bottles" }, { "Product_ID": 3, "Product_Name": "Aniseed Syrup", "Category_ID": 2, "Quantity_Per_Unit": "12 - 550 ml bottles", "Unit_Price": 10.0 }, { "Product_ID": 4, "Product_Name": "Chef Anton's Cajun Seasoning", "Category_ID": 2, "Quantity_Per_Unit": "48 - 6 oz jars", "Unit_Price": 22.0 }, { "Product_ID": 5, "Product_Name": "Chef Anton's Gumbo Mix", "Category_ID": 2, "Quantity_Per_Unit": "36 boxes", "Unit_Price": 21.35 }, { "Product_ID": 6, "Product_Name": "Grandma's Boysenberry Spread", "Category_ID": 2, "Quantity_Per_Unit": "12 - 8 oz jars", "Unit_Price": 25.0 } ]; } function ViewModel(sessionId) { var productView = new wijmo.data.ArrayDataView(sourceData()); 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");}; this.clearPaging = function () {productView.pageSize(0);}; this.setPaging = function () {productView.pageSize(4);}; this.prevPage = function () {productView.prevPage();}; this.nextPage = function () {productView.nextPage();}; this.add = function () {productView.add({ Product_ID: 100, Product_Name: "Tomato", Category_ID: 1, Unit_Price: 5 }); productView.commitEdit(); }; this.deleteCurrent = function () {productView.remove();}; this.doublePrice = function () { productView.editItem(); productView.currentEditItem().Unit_Price *= 2; productView.commitEdit(); }; } $(document).ready(function () { viewModel = new ViewModel(); ko.applyBindings(viewModel); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
        var viewModel;
        function sourceData() {
            return [
                { "Product_ID": 1, "Product_Name": "Chai", 
                    "Category_ID": 1, "Quantity_Per_Unit": "10 boxes x 20 bags", "Unit_Price": 18.0 }, 
                { "Product_ID": 2, "Product_Name": "Chang", 
                    "Category_ID": 1, "Quantity_Per_Unit": "24 - 12 oz bottles" }, 
                { "Product_ID": 3, "Product_Name": "Aniseed Syrup", 
                    "Category_ID": 2, "Quantity_Per_Unit": "12 - 550 ml bottles", "Unit_Price": 10.0 }, 
                { "Product_ID": 4, "Product_Name": "Chef Anton's Cajun Seasoning", 
                    "Category_ID": 2, "Quantity_Per_Unit": "48 - 6 oz jars", "Unit_Price": 22.0 }, 
                { "Product_ID": 5, "Product_Name": "Chef Anton's Gumbo Mix", 
                    "Category_ID": 2, "Quantity_Per_Unit": "36 boxes", "Unit_Price": 21.35 }, 
                { "Product_ID": 6, "Product_Name": "Grandma's Boysenberry Spread", 
                    "Category_ID": 2, "Quantity_Per_Unit": "12 - 8 oz jars", "Unit_Price": 25.0 }
           ];
        }
        function ViewModel(sessionId) {
            var productView = new wijmo.data.ArrayDataView(sourceData());
            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");};
            this.clearPaging = function () {productView.pageSize(0);};
            this.setPaging = function () {productView.pageSize(4);};
            this.prevPage = function () {productView.prevPage();};
            this.nextPage = function () {productView.nextPage();};
            this.add = function () {productView.add({
                    Product_ID: 100,
                    Product_Name: "Tomato",
                    Category_ID: 1,
                    Unit_Price: 5
                });
                productView.commitEdit();
            };
            this.deleteCurrent = function () {productView.remove();};
            this.doublePrice = function () {
                productView.editItem();
                productView.currentEditItem().Unit_Price *= 2;
                productView.commitEdit();
            };
        }
 
        $(document).ready(function () {
            viewModel = new ViewModel();
            ko.applyBindings(viewModel);
        });
</script>

HTML ファイルを保存し、ブラウザで開きます。次のようなウィジェットが表示されます。

関連トピック

参照