使用空白单元格以编程方式排序答案

【问题标题】：Programmatically sorting with blank cells使用空白单元格以编程方式排序
【发布时间】：2021-02-16 11:46:48
【问题描述】：

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

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

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

我在 Edge 中使用 Tabulator 版本 4.9.3

【问题讨论】：

标签： javascript tabulator

【解决方案1】：

您所要做的就是在列定义中设置alignEmptyValues，然后当您通过单击列标题或以编程方式使用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>

【讨论】：

太棒了，这就是我想要的。非常感谢！