javascript - Kendo Grid 上的自定义排序可以通过编程方式触发

标签 javascript sorting kendo-ui kendo-grid kendo-datasource

我有一个剑道网格,希望某些行在排序后保持固定在网格的顶部。我可以通过在每一列上指定自定义排序来实现此目的。例如:

<script>
    var ds = new kendo.data.DataSource({
        data: [
            { name: "Jane Doe", age: 30, height: 170, pinToTop: false },
            { name: "John Doe", age: 33, height: 180, pinToTop: false },
            { name: "Sam Doe", age: 28, height: 185, pinToTop: true },
            { name: "Alex Doe", age: 24, height: 170, pinToTop: false },
            { name: "Amanda Doe", age: 25, height: 165, pinToTop: true }
        ]
    });

    $('#grid').kendoGrid({
        dataSource: ds,
        sortable: {mode: 'single', allowUnsort: false},
        columns: [{
            field: "name",
            title: "Name",
            sortable: {
                compare: function (a, b, desc) {
                    if (a.pinToTop && !b.pinToTop) return (desc ? 1 : -1);
                    if (b.pinToTop && !a.pinToTop) return (desc ? -1 : 1);
                    if (a.name > b.name) return 1;
                    else return -1;
                }
            }
        }
        //Other columns would go here
        ]
    });
</script>

当用户单击列标题对网格进行排序时,这可以正常工作。但是,如果我想使用 Javascript 代码对网格进行排序,如下所示:

$('#grid').data('kendoGrid').dataSource.sort({field: 'age', dir: 'asc'});

pinToTop 字段将被忽略。这是因为排序是在数据源上执行的,但自定义排序逻辑是网格的一部分。

JSFiddle Example

我需要:

  • 能够在数据源中指定自定义排序逻辑,以便当我使用 JavaScript 对数据源进行排序时,固定的行会保留在顶部。

或者:

  • 能够从 JavaScript 执行某种网格本身,而不是数据源。

最佳答案

这并不完全是我想要的,但我能够通过对多个字段进行排序并首先包含 pinToTop 字段来解决此问题:

$('#grid').data('kendoGrid').dataSource.sort([{field: 'pinToTop', dir: 'desc'},{field: 'age', dir: 'asc'}]);

关于javascript - Kendo Grid 上的自定义排序可以通过编程方式触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26634883/

相关文章:

c# - OrderBy 忽略重音字母

kendo-ui - 自定义弹出编辑器中的 kendoui 验证工具提示未正确定位

jquery - 如何在listview kendo ui的数据源中设置数据项

javascript - Promise.each 没有 Bluebird

MySQL排序不排序?

javascript - 变量不随 if 语句改变

java - 从java中的数组中查找重复元素出现两次以上

javascript - 在表格中显示 Angular 中单个对象的数据时出现问题

javascript promise 、缓存和 Angular

javascript - 数据表columnDefs不工作: jquery/javascript