Tabulator树形结构Lucide图标切换功能失效问题求助

问题根源 #

使用dataTreeCollapseElement和dataTreeExpandElement设置<i data-lucide="xxx">标签后，调用createIcons初始化Lucide图标时，会把原有的<i>元素替换成<svg>元素，而Tabulator的展开/折叠点击事件是绑定在初始的<i>元素上的，元素被替换后事件失效，导致点击图标无反应。

解决方案 #

方法一：直接使用SVG字符串作为图标元素 #

跳过<i>标签，直接将Lucide图标的SVG代码作为dataTreeCollapseElement和dataTreeExpandElement的值，避免元素被替换导致事件丢失：

let tableContent = new Tabulator("#interviewTableId", {
    dataTree:true,
    // 直接使用Lucide minus和plus的SVG代码
    dataTreeCollapseElement:`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M5 12h14"/></svg>`,
    dataTreeExpandElement:`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`,
    ajaxURL: route("interviewlist.list"),
    ajaxParams: { querystr: querystr, status: status },
    ajaxFiltering: true,
    ajaxSorting: true,
    printAsHtml: true,
    printStyled: true,
    pagination: "remote",
    paginationSize: 10,
    paginationSizeSelector: [5, 10, 20, 30, 40],
    layout: "fitColumns",
    responsiveLayout: "collapse",
    placeholder: "No matching records found",
    columns: [
        {
            title: "",
            width: "180",
        },
        {
            title: "#ID",
            field: "id",
            width: "180",
        },
        {
            title: "Task Name",
            field: "taskname",
            headerHozAlign: "left",
        },
        {
            title: "Applicant Name",
            field: "applicant_id",
            headerHozAlign: "left",
        },
    ],
    // 无需再调用createIcons
});

方法二：重新绑定点击事件到生成的SVG #

如果坚持使用<i>标签的方式，在createIcons初始化后，手动给生成的SVG元素绑定Tabulator的展开/折叠事件：

let tableContent = new Tabulator("#interviewTableId", {
    dataTree:true,
    dataTreeCollapseElement:"<i data-lucide='minus' class='w-4 h-4'></i>",
    dataTreeExpandElement:"<i data-lucide='plus' class='w-4 h-4'></i>",
    ajaxURL: route("interviewlist.list"),
    ajaxParams: { querystr: querystr, status: status },
    ajaxFiltering: true,
    ajaxSorting: true,
    printAsHtml: true,
    printStyled: true,
    pagination: "remote",
    paginationSize: 10,
    paginationSizeSelector: [5, 10, 20, 30, 40],
    layout: "fitColumns",
    responsiveLayout: "collapse",
    placeholder: "No matching records found",
    columns: [
        {
            title: "",
            width: "180",
        },
        {
            title: "#ID",
            field: "id",
            width: "180",
        },
        {
            title: "Task Name",
            field: "taskname",
            headerHozAlign: "left",
        },
        {
            title: "Applicant Name",
            field: "applicant_id",
            headerHozAlign: "left",
        },
    ],
    renderComplete() {
        createIcons({
            icons,
            "stroke-width": 1.5,
            nameAttr: "data-lucide",
        });
        
        // 给生成的SVG重新绑定展开/折叠事件
        document.querySelectorAll('[data-lucide="minus"], [data-lucide="plus"]').forEach(el => {
            // 找到当前图标所在的行
            const row = tableContent.getRow(el.closest('.tabulator-row'));
            if(row) {
                el.addEventListener('click', (e) => {
                    e.stopPropagation(); // 阻止事件冒泡避免触发行点击
                    // 切换行的展开/折叠状态
                    row.treeIsOpen() ? row.treeClose() : row.treeOpen();
                });
            }
        });
    },
});

注意：方法二需要在每次表格渲染完成（比如分页切换、数据更新）时重新绑定事件，renderComplete钩子会在这些场景下触发，所以能保证事件正常绑定。

内容的提问来源于stack exchange，提问作者Md Emrul Easir