我正在使用Gijgo库(https://gijgo.com/tree/demos/material-design-treeview-checkbox)在树中显示项目.我不希望在父 node 旁边有复选框(在图像中标记为红色).有人能帮我这个忙吗?

这是我显示树 struct 的方式:

        var tree2 = $('#tree').tree({
            uiLibrary: 'bootstrap4',
            dataSource: '/products/getcategoriestree/' + get_configurator_id(),
            iconsLibrary: 'fontawesome',
            primaryKey: 'id',
            checkboxes: true,                
            icons: {
                expand: '<i class="fa fa-chevron-right"></i>',
                collapse: '<i class="fa fa-chevron-down"></i>'
            }, dataBound: function (e) {
                tree2.expandAll();
            }
        });

我try 使用nodeDatBound函数迭代每个 node ,我可以获取我不想要的每个父项,但我不确定如何从特定 node 中删除复选框.

        tree2.on('nodeDataBound', function (e, node, id, record) {                
            if (record["children"] != null) {
                console.log("PARENT Record");
                console.log(record);
                console.log(node);
                node.enableCheckBox = false;
            }
        });

enter image description here

另外,我不能更改库,它是遗留代码的一部分.

推荐答案

您可以使用css覆盖现有样式:

<style>
   div[data-type="tree"] > ul > li[data-role="node"] > div[data-role="wrapper"] > span[data-role="checkbox"] {
      display: none !important;
   }
</style>

您也可以在JavaScript中使用querySelectorAll来做类似的事情.我在这里使用了一个更通用的 Select 器(如在css示例中),但您可能会使用回调参数(e, node, id, record)来专门 Select 要删除的元素.

tree2.on('nodeDataBound', function (e, node, id, record) {            
    const elements = document.querySelectorAll(`div[data-type="tree"] > ul > li[data-role="node"] > div[data-role="wrapper"] > span[data-role="checkbox"]`);
    elements.forEach((el) => el.remove());       
});

Javascript相关问答推荐

假设我有2个对象,根据它们,我想要新对象

jest使用useLocate测试自定义挂钩

setFinder关闭模式并重定向到url

Angular:ng-contract未显示

为什么在获取回调内设置状态(不会)会导致无限循环?

禁用从vue.js 2中的循环创建的表的最后td的按钮

硬币兑换运行超时

未捕获错误:在注销后重定向到/login页面时找不到匹配的路由

React 17与React 18中的不同setState行为

我应该绑定不影响状态的函数吗?'

React Code不在装载上渲染数据,但在渲染上工作

在使用HighChats时如何避免Datatables重新初始化错误?

优化Google Sheet脚本以将下拉菜单和公式添加到多行

使用Java脚本导入gltf场景并创建边界框

我怎么在JS里连续加2个骰子的和呢?

Reaction Native中的范围滑块

本地库中的chartjs-4.4.2和chartjs-plugin-注解

使用getBorbingClientRect()更改绝对元素位置

在JS中动态创建对象,并将其追加到HTML表中

不同表的条件API端点Reaction-redux