[TreeView] ツリーの再構築

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://codepen.io/wijmo-jp/pen/gReOKE.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.nav.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h3>ツリーの再構築</h3>
  <p>TreeViewのデータソース（itemsSource）はCollectionViewではなく配列であり、データソースのデータを変更してもコントロールの表示は更新されませんが、TreeView.loadTreeメソッドを実行すると、ツリー全体を再構築して、コントロールの表示を更新することができます。</p>
  <p>※CollectionViewは、階層化データの変更追跡や通知に対応していません。</p>
  <form name="form" class="form-inline">
    <button id="updateData" type="button" class="btn btn-default">データソースを変更</button>
    <button id="loadTree" type="button" class="btn btn-default">ツリーを再構築</button>
  </form>
  <div id="treeView"></div>

</div>

CSS

#treeView {
  margin-top: 10px;
  height: 400px;
}

JavaScript

var products = sample.productsTree();
var treeView = new wijmo.nav.TreeView('#treeView', {
  itemsSource: products,
  displayMemberPath: '名前'
});

document.form.updateData.addEventListener('click', function (e) {
  products[0].items[0].名前 = '商品名を変更';
  treeView.refresh();
});
document.form.loadTree.addEventListener('click', function (e) {
  treeView.loadTree();
});