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 设置选项

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

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

更改制表符树图标

2 个答案: