Question

在JavaScript中，我正在调用API并使用制表符，并试图在JavaScript中显示数据。我想自定义对齐的一些左边和一些到右边。当应用align属性时，它仅对齐表数据而不对齐表头，我想自定义对齐表头。请有人帮我。

部分代码：

columns: [
    { title: "Date", field: "Date", sorter: "date", align: "left", bottomCalc: function (values) { return "Grand Total"; } },
    {
        title: "Transaction Count", field: "TransactionCount", sorter: "number", align: "right", bottomCalc: "sum"
    },
    {
        title: "Credit Card", field: "CreditCard", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "Cash", field: "Cash", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "No Charge", field: "NoCharge", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "ACH", field: "ACH", sorter: "number", align: "right", visible: false, formatter: "money", bottomCalc: "sum", bottomCalcParams: { precision: "2" }
    },
    {
        title: "Total", field: "Total", sorter: "number", align: "right", formatter: "money",  bottomCalc: "sum", bottomCalcParams: { precision: "2"}
    }
    ],

Answer 1

我认为目前还没有内置选项，但是可以使用一些简单的CSS来实现。

将自定义CSS类添加到列定义中带有右对齐标题的列：

{ title: "Transaction Count", cssClass: "rightAlignedHeader", (...) },

然后在CSS中为此类定义正确的文本对齐方式，但将其限制为.tabulator-header的子元素

.tabulator-header .rightAlignedHeader {
  text-align: right !important;
}

Answer 2

var coldefs = tableR.getColumnDefinitions();
for (var i=0;i<coldefs.length;i++) {
    coldefs[i].align = 'right';
}
tableR.setColumns(coldefs);

如何在制表符中右对齐表头？

2 个答案: