TreeView

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<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">

  <h1>TreeView</h1>
  <p>ツリービュー。チェックボックス、画像、文字列などのHTMLコンテンツを含む階層リストを表示します。</p>
  <div id="treeView"></div>
  <div id="panel"></div>

</div>

CSS

#treeView {
  height: 350px;
  border: 1px solid rgba(0,0,0,0.2);
}

JavaScript

var treeView = new wijmo.nav.TreeView('#treeView');

var data = sample.productsTree();
var dataHtml = sample.productsTree();
for (var i = 0; i < dataHtml.length; i++) {
  dataHtml[i].名前 = wijmo.format('<span style="color: red"><b>{名前}</b></span>', dataHtml[i]);
}
treeView.itemsSource = data;
treeView.displayMemberPath = '名前';
function collapseAll(e) {
  treeView.collapseToLevel(0);
}
function expandAll(e) {
  treeView.collapseToLevel(1000);
}
function setImageMemberPath(e) {
  treeView.imageMemberPath = e.target.checked ? '画像' : ' ';
}
function setIsContentHtml(e) {
  treeView.isContentHtml = e.target.checked;
  treeView.itemsSource = e.target.checked ? dataHtml : data;
}

new sample.PropertyPanel('#panel', treeView, [
  {
    category: '表示',
    props: [
      { title: 'チェックボックス', name: 'showCheckboxes', type: 'Boolean' },
      { title: '画像', name: 'imageMemberPath', type: 'Boolean', changed: setImageMemberPath },
      { title: 'HTMLとして表示', name: 'isContentHtml', type: 'Boolean', changed: setIsContentHtml },
      { title: 'アニメーション', name: 'isAnimated', type: 'Boolean' },
    ]
  },
  {
    category: '動作',
    props: [
      { title: 'ドラッグ', name: 'allowDragging', type: 'Boolean' },
      { title: '読み取り専用', name: 'isReadOnly', type: 'Boolean' },
      { title: '自動的に折りたたみ', name: 'autoCollapse', type: 'Boolean' },
      { title: 'クリックで展開', name: 'expandOnClick', type: 'Boolean' },
      { title: 'すべて折りたたみ', name: 'collapseAll', type: 'Button', changed: collapseAll },
      { title: 'すべて展開', name: 'expandAll', type: 'Button', changed: expandAll },
      { title: '無効', name: 'isDisabled', type: 'Boolean' },
    ]
  },
]);