Wijmo UI for the Web
マークアップとスクリプティング
| Wijmo ユーザーガイド > ウィジェット > Grid > マークアップとスクリプティング |
データソースとしてテーブルを使用する wijGrid ウィジェットの HTML マークアップは、次のようになります。
| マークアップ |
コードのコピー |
|---|---|
<table id="wijgrid"> <thead> <th>Column A</th> <th>Column B</th> </thead> <tbody> <tr> <td>Cell 1A</td> <td>Cell 1B</td> </tr> <tr> <td>Cell 2A</td> <td>Cell 2B</td> </tr> </tbody> </table> | |
次の jQuery スクリプトでウィジェットを初期化できます。
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ }); }); }); </script> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。
次のように、マークアップで提供されているテーブルデータを jQuery スクリプトのデータに置き換えることもできます。
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20173.128", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ data: [[0, "a"], [1, "b"], [2, "c"]] }); }); }); </script> | |
ここで説明しているマークアップとスクリプトの結果は次のようになります。