Wijmo UI for the Web
Wijgrid でのデータの更新
| Wijmo ユーザーガイド > ウィジェット > Grid > 概念 > 行 > Wijgrid でのデータの更新 |
クイックスタートの例に基づき、data オプションを使用して、グリッドの基底のデータを変更できます。
data() メソッドから返される構造体のデータ形式は、元のデータセットと同じです。形式が HTML テーブルや２次元配列だった場合は、２次元配列が返されます。形式がオブジェクトの配列だった場合は、オブジェクトの配列が返されます。
ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<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 () { var employees = [ {ID: 0, Name: "Nancy"}, {ID: 1, Name: "Frank"} ]; $("#wijgrid").wijgrid({ data: employees }); $("#btnUpdate").click(function() { var data = $("#wijgrid").wijgrid("data"); data[0].Name = "Nancy"; // change the Name property of the 1st item data.push({ID: 2, Name: "David"}); // add a new item $("#wijgrid").wijgrid("ensureControl", true); // refresh wijgrid }); }); }); </script> | |
ドロップダウンからマークアップをコピーして、<body> セクション内に貼り付けます
| マークアップ |
コードのコピー |
|---|---|
<table id="wijgrid"> </table> <button id="btnUpdate">Update</button> | |
全て展開
すべて折りたたむ