CSCWijmo 发表于 2020-6-2 09:45:34

treeview支持部分节点复选框不可选中么

treeview支持部分节点复选框不可选中么,我这边需要判断不是最末级节点,不能选中。

KevinChen 发表于 2020-6-2 14:19:38

这个没有直接控制的接口,但可以自己实现,参考以下代码:

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]
查看完整版本: treeview支持部分节点复选框不可选中么