jstree-table插件问题：列宽失效与Bootstrap下拉菜单无法展开

我来帮你搞定这两个头疼的问题：

一、Bootstrap下拉菜单无法展开的问题 #

这是因为jstree会拦截节点内的点击事件，干扰了Bootstrap下拉组件的默认事件绑定。你可以试试这两种方法：

方法1：阻止事件冒泡到jstree节点 #

给下拉触发按钮绑定点击事件，阻止事件向上冒泡，同时手动触发下拉：

// 监听下拉触发按钮的点击
$(document).on('click', '.dropdown-toggle', function(e) {
    // 阻止事件传递给jstree的节点元素
    e.stopPropagation();
    // 手动触发Bootstrap下拉菜单
    $(this).dropdown('toggle');
});

方法2：在jstree初始化完成后重新绑定下拉组件 #

等jstree完全加载好之后，重新初始化所有下拉元素，确保事件绑定生效：

$('#jstree').on('ready.jstree', function() {
    // 重新初始化Bootstrap下拉
    $('.dropdown-toggle').dropdown();
});

二、jstree-table列宽设置无效的问题 #

插件的默认样式或者Bootstrap的表格布局可能覆盖了你设置的宽度，试试这些方案：

方法1：用自定义CSS强制设置宽度 #

给对应列的表头和单元格添加自定义样式，用!important强制覆盖默认规则：

/* 假设你要设置第二列的宽度，根据插件的类命名调整数字 */
.jstree-table-col-1 {
    width: 250px !important;
}
.jstree-table-cell-1 {
    width: 250px !important;
}

方法2：初始化时指定列的自定义类并设置样式 #

在jstree-table的配置里给列添加自定义类，然后通过CSS设置宽度：

$('#jstree').jstree({
    plugins: ['table'],
    table: {
        columns: [
            { header: '名称', width: '150px', class: 'col-name' },
            { header: '操作', width: '200px', class: 'col-action' }
        ]
    },
    // 其他jstree配置...
});

然后添加CSS：

.col-name, .col-action {
    width: inherit !important;
}
/* 或者直接指定宽度 */
.col-action {
    width: 200px !important;
}

方法3：设置表格为固定布局 #

给jstree-table的表格元素设置固定布局，让列宽设置生效：

.jstree-table {
    table-layout: fixed !important;
    width: 100% !important;
}

你可以把这些代码加到你的示例里测试，应该能解决这两个问题～

内容的提问来源于stack exchange，提问作者user3631443