【问题标题】:Multiple sort on Kendo Grid columns / DataSource - set sorting dynamically对 Kendo Grid 列/数据源进行多重排序 - 动态设置排序
【发布时间】:2016-08-04 02:06:35
【问题描述】:

我想要完成的是在用户对 kendo 网格中的列进行排序时应用“自动”辅助列排序。

所以在this JS fiddle example 中,如果用户按“值”排序,它也会按“名称”排序。请注意,0 是一起排序的,但名称不是按字母顺序排列的。我希望它们按字母顺序排列(次要排序)。

Here's an attempt 覆盖数据源排序以完成此操作。我正在采用用户的原始排序并在“SortedName”上添加额外的排序。根据记录的排序数组,它似乎很接近但仍然无法正常工作。

关于如何做到这一点的任何其他想法?

注意:我不想让用户按多列排序。我使用它的真实世界示例最多可以有 50 多列(不幸的是),因此多重排序可能会让人感到困惑/不直观。而且我希望它在幕后完成,无需额外的用户交互。

重写 kendo 数据源 sort() 的示例代码:

dataSource.originalSort = dataSource.sort;
dataSource.sort = function () {
    // take the user's sort and apply sorting on an additional column
    // the sort array should look like this:
    [
        { field: "Value", dir: "asc" }, // this is what the user sorted by
        { field: "SortedName", dir: "asc" }, // and I'm adding this
    ]
    return dataSource.originalSort.apply(this, arguments);
}

【问题讨论】:

  • 是否可以在剑道源代码中添加一行?您可以在调用数据源排序方法之前轻松触发 kendo.columnsorter.js 中的事件。如果这是一个选项,请告诉我您使用的是什么版本的剑道,我会告诉您要添加什么代码以及在哪里添加。
  • 这绝对是一个开始 :) 我在 2016.1.112。谢谢!

标签: kendo-ui telerik kendo-grid telerik-grid kendo-datasource


【解决方案1】:

请尝试以下代码 sn-p。

<div id="grid">
    </div>
    <script>
        var dataSource = new kendo.data.DataSource({
            data: [
                { Name: "Lisa", Value: 1 },
                { Name: "Dan", Value: 12 },
                { Name: "Ken", Value: 5 },
                { Name: "Arthur", Value: 15 },
                { Name: "Bob", Value: 0 },
                { Name: "Sally", Value: 0 },
                { Name: "Alexis", Value: 0 },
                { Name: "Cody", Value: 0 },
                { Name: "Steve", Value: 0 },
                { Name: "Andrew", Value: 0 },
                { Name: "Duke", Value: 0 }
            ],
            schema: {
                model: {
                    fields: {
                        Name: { type: "string" },
                        Value: { type: "number" }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            dataBound: function (e) {
                var isSortedByName = false;
                var grid = $("#grid").data("kendoGrid");
                var ds = grid.dataSource;
                var sort = ds.sort();
                if (sort) {
                    for (var i = 0; i < sort.length; i++) {
                        if (sort[i].field == "Name") {
                            isSortedByName = true;
                        }
                    }
                    if (isSortedByName == false) {

                        sort.push({ field: "Name", dir: "asc" });
                        ds.sort(sort);
                    }
                }
            },
            columns: [
                { field: "Name" },
                { field: "Value" }
            ],
            sortable: true
        });
    </script>

【讨论】:

  • 行了!谢谢你。注意:我不得不稍微改变一下 - 如果用户将排序更改为另一列,则将“排序”应用于末尾,因此它将是 [{ field: "Name", dir: "asc"}, { field: "Value", dir: "desc" }],产生错误的排序,但这是一个简单的修复。
猜你喜欢
  • 1970-01-01
  • 2017-10-27
  • 1970-01-01
  • 1970-01-01
  • 2014-08-21
  • 1970-01-01
  • 2010-11-20
相关资源
最近更新 更多