treeview支持部分节点复选框不可选中么
treeview支持部分节点复选框不可选中么,我这边需要判断不是最末级节点,不能选中。这个没有直接控制的接口,但可以自己实现,参考以下代码:
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.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.hasChildren) {
console.log(nodes.element);
nodes.element.getElementsByClassName('wj-node-check').disabled=true;
getArray(nodes.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/demos/Nav/TreeView/Nodes/Checkboxes/purejs
页:
[1]