这个没有直接控制的接口,但可以自己实现,参考以下代码:
- import 'bootstrap.css';
- import '@grapecity/wijmo.styles/wijmo.css';
- import './styles.css';
- import * as wjNav from '@grapecity/wijmo.nav';
- import { getData } from './data';
- //
- document.readyState === 'complete' ? init() : window.onload = init;
- //
- function init() {
- let tree = new wjNav.TreeView('#theTree', {
- itemsSource: getData(),
- displayMemberPath: 'header',
- childItemsPath: 'items',
- showCheckboxes: true,
- //
- // show checked items below the tree
- checkedItemsChanged: (sender) => {
- let items = sender.checkedItems, msg = '';
- //
- if (items.length) {
- msg = '<p><b>Checked Items:</b></p><ol>\r\n';
- for (let i = 0; i < items.length; i++) {
- msg += '<li>' + items[i].header + '</li>\r\n';
- }
- msg += '</ol>';
- }
- //
- document.getElementById('tvChkStatus').innerHTML = msg;
- }
- });
- var nodes = tree.nodes;
- function getArray(nodes)
- {
- for (var i in nodes) {
- if (nodes[i].hasChildren) {
- console.log(nodes[i].element);
- nodes[i].element.getElementsByClassName('wj-node-check')[0].disabled=true;
- getArray(nodes[i].nodes);
- }
- }
- }
- getArray(nodes);
-
- //
- let checkedItems = [];
- //
- // handle buttons
- document.getElementById('btnCheckAll').addEventListener('click', () => {
- tree.checkAllItems(true);
- });
- //
- document.getElementById('btnUncheckAll').addEventListener('click', () => {
- tree.checkAllItems(false);
- });
- //
- document.getElementById('btnSaveState').addEventListener('click', () => {
- checkedItems = tree.checkedItems || [];
- });
- //
- document.getElementById('btnRestoreState').addEventListener('click', () => {
- tree.checkedItems = checkedItems;
- });
- }
复制代码
这部分代码完整拷贝到示例的app.js中就可以看到效果了。
https://www.grapecity.com/wijmo/ ... s/Checkboxes/purejs |