Question

是否可以在读取数据和避免第二次服务器读取之前以编程方式设置KendoUI DataSource的sort参数？范围是为特定用户交互设置默认排序。怎么样？

这是我想要做的一个例子，因为答案没有达到目的（或者我可能不了解事情的运作方式）。

我使用初始排序定义了一个Kendo DataSource：

var datasource = new kendo.data.DataSource({
    parameterMap: function (inputParams, operation) {
        return JSON.stringify(inputParams)
    },
    // default sort
    sort: [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]
});

此DataSource绑定到Kendo网格：

var grid = $("element").kendoGrid({
    dataSource: datasource   
});

然后我有一个按钮，在DataSource上调用“read”并用第一页数据填充网格：

$("#btn").bind("click", function(e) {
    datasource.page(1);
});

这样，在单击按钮后，用户获取按“field_1”和“field_2”排序的数据，并且网格在列标题上显示此排序。然后，用户可以通过单击列标题以任何方式重新排序数据。

我想要做的是将默认排序重置为初始值，如DataSource声明中所定义，在列标题上再次显示它，而不再创建新的DataSource。

类似的东西：

$("#btn").bind("click", function(e) {
    datasource.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]; 
    datasource.page(1);
});

所提供的解决方案似乎没有达到这一点（我仍然不明白为什么我会因为一个似乎不是那么微不足道并且应该由框架解决的合法问题而失去声誉点。）

请告诉我我错了（我不担心失去声誉 - 我想了解如何解决问题）。

Answer 1

var kendoGrid = $("#grid").data('kendoGrid');
var dsSort = [];
dsSort.push({ field: "fieldName1", dir: "asc" });
dsSort.push({ field: "fieldName2", dir: "desc" });
kendoGrid.dataSource.sort(dsSort);

Answer 2

是。可以通过sort设置。

Answer 3

这是一个jsfiddle，正是你要问的：http://jsfiddle.net/MechStar/c2S5d/

简而言之，您需要先将dataSource设置为null，然后在从用户那里获得所需的输入时注入dataSource：

myKendoGrid.data（“kendoGrid”）。setDataSource（getKendoDataSource（“ShipName”，“asc”））;

var getKendoDataSource = function (sidx, sord) {
  return new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    pageSize: 10,
    serverPaging: true,
    serverSorting: true,
    sort: {
      field: sidx ? sidx : "",
      dir: sord ? sord : ""
    }
  });
};
var myKendoGrid = $("#grid").kendoGrid({
  columns: [
    { field: "OrderID" },
    { field: "ShipName" },
    { field: "ShipCity" }
  ],
  dataSource: null,
  pageable: {
    pageSizes: [10, 20, 50, 100, 200]
  },
  resizable: true,
  scrollable: false,
  sortable: {
    allowUnsort: false
  }
});
$("#link").click(function () {
  myKendoGrid.data("kendoGrid")
    .setDataSource(getKendoDataSource("ShipName", "asc"));
});

Answer 4

所以你想在第一次读取数据之前设置排序吗？只需确保你的ui控件有autobind：false，然后在数据源上设置sort属性，然后在准备好获取排序数据时调用datasource.read（）。

Answer 5

我知道你正在努力实现的目标。我必须这样做，因为我们正在保存用户排序和过滤（在我的情况下是客户端），我们不能出于其他原因使用网格函数 getOptions / setOptions 。即使您设置了 autobind：false ，如果您看到autobind的定义，这也无法按预期工作：

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind

如果设置为false，则窗口小部件在初始化期间不会绑定到数据源。在这种情况下，数据绑定将在触发数据源的更改事件时发生。默认情况下，窗口小部件将绑定到配置中指定的数据源。

当您执行 dataSource.sort（）时，会触发更改事件，然后隐式地在dataSource中执行读取（这就是你读第二台服务器的原因）。

因此，您需要做的是创建一个带有所需排序选项的新dataSource，然后显式调用 dataSource.read（）。

例如（您可以将默认选项扩展为不重复配置）：

var options = $.extend({}, dataSourceOptions);
options.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ];
var dataSource = new kendo.data.DataSource(options);
grid.setDataSource(dataSource);
grid.dataSource.read();

希望这有帮助。此致！

以编程方式设置网格排序

5 个答案: