以编程方式对空白单元格进行排序

Question

我正在通过 setSort 函数使用多列对 table 进行排序，该函数在下拉框更改时调用。在下面的代码中，病房列包含一些空值。

patientTable.setSort([
    { column: 'name', dir: 'asc' },
    { column: 'ward', dir: 'asc' }
])

问题是在按升序排序时，所有空值都出现在列表的顶部。我知道您可以使用 alignEmptyValues 在使用内置分拣器之一强制空单元格到底部时。使用 setSort 函数时有没有办法做到这一点？我在文档中找不到任何内容，向对象添加 alignEmptyValues 似乎没有任何作用。

我在 Edge 中使用 Tabulator 版本 4.9.3

Answer 1

您所要做的就是在列定义中设置 alignEmptyValues，然后当您排序时，通过单击列 header 或以编程方式使用 setSort，它将移动定义的空值。

var data = [
    {name:"Tom",   ward:"A"},
    {name:"Dick",  ward:"B"},
    {name:"Harry", ward:"C"},
    {name:"Larry", ward:""},
    {name:"Moe",   ward:"A"},
    {name:"Curly", ward:"C"}
];

var table = new Tabulator("#example-table", {
    data:data,
    columns:[
        {title:"Name", field:"name"},
        {title:"Ward", field:"ward", sorter: "string", sorterParams: { alignEmptyValues:"bottom" } },
    ],
});

document.getElementById('sort').addEventListener('click', ev => {
    table.setSort([
        { column: 'name', dir: 'asc' },
        { column: 'ward', dir: 'asc' }
    ]);
});

<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<div id="example-table"></div>

<br>
<button id="sort">Set Sort</button>

以编程方式对空白单元格进行排序

Programmatically sorting with blank cells

javascript

tabulator