更改选项卡树图标

Question

首先，喜欢这个产品！

其次，是否可以更改 Tabulator 中树模块的展开和折叠图标？如果我改为使用块状箭头（Alt 16 和 Alt 30），这将真正有助于我项目的一致性。

我已经操作 CSS 删除边框等

数据和列在我正在编译的软件包中被替换。

var table = new Tabulator("#example-table", {
    height:400,
    data: [ **TableData** ]
    dataTree:true,
    dataTreeStartExpanded:true,
    dataTreeBranchElement: false,
    dataTreeChildIndent: 9,
    dataTreeCollapseElement: !1,
    dataTreeStartExpanded: !1,
    layout:"fitColumns",
    columns:[ **ColumnData** ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("ID " + row.getData().id + " Selected");
    },
});

我将其与

配对

<link href="dist/css/tabulator.min.css" rel="stylesheet">

<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

Answer 1

检查 Tabulator 的源代码，dataTreeCollapseElement 和 dataTreeExpandElement 正在寻找字符串或 DOM 元素。尝试指定一个不会显示的空元素：

dataTreeCollapseElement: '<i/>',
dataTreeExpandElement: '<i/>',

Answer 2

您可以使用 dataTreeExpandElement 和 dataTreeCollapseElement 在你的 table 构造函数

中为此设置选项

var table = new Tabulator("#example-table", {
    dataTree:true,
    dataTreeCollapseElement:"<span>►</span>",
    dataTreeExpandElement:"<span>▼</span>",
});

有关如何使用此功能的完整详细信息，请参阅 Data Tree Documentation

更改选项卡树图标

Change Tabulator Tree Icon

tabulator