以编程方式设置网格排序

Posted 2023-02-26

【中文标题】以编程方式设置网格排序

【英文标题】：Programmatically setting grid sort

【发布时间】：2012-12-01 12:51:14

【问题描述】：

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

这是我正在尝试做的一个示例，因为答案没有切中要害（或者我可能不了解事情是如何运作的）。

我用初始排序定义了一个 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"
    ]
);

此数据源绑定到 Kendo 网格：

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

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

$("#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);
); 

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

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

【问题讨论】：

我想这是不可能的。

它似乎在 JS 中通过 $grid.dataSource.sort( field: "A", dir: "desc" , field: "B", dir: "asc" ，字段：“C”，目录：“asc”，字段：“D”，目录：“desc”）；我看到的唯一问题是排序指示器并未显示在所有列上，

【参考方案1】：

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

【讨论】：

是否可以更新实际的 grid.dataSource.data() 排序？不仅仅是风景

【参考方案2】：

这里有一个 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"));
);

【参考方案3】：

是的。可以通过sort 设置实现。

【讨论】：

实际上，排序调用了对服务器的第二次调用。我想在读取数据之前更改排序，修改默认排序。

叹息...你真的尝试过吗？也许您正在使用 sort 方法而不是 sort 配置选项。

我都试过了。你能举个例子吗？请参阅我给其他答案留下的评论，以了解我想要做什么。

然后使用parameterMap函数。每次发出请求时都会调用它。在文档中查找更多信息：docs.kendoui.com/api/framework/…

【参考方案4】：

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

【讨论】：

好的，但是如果我想在数据源声明之外设置排序，就在每次读取调用之前，因为排序条件改变或只是重置为默认值？在我看来，实现它的唯一方法是销毁现有数据源，使用新的排序参数创建一个新数据源。

你可以这样做。 var myDataSource = new kendo.data.DataSource(); myDataSource.sort = [field: "myFieldName", dir: "asc", field: "myOtherField", dir: "desc"];然后调用 myDataSource.read();

【参考方案5】：

我知道您想要达到的目标。我必须这样做，因为我们正在保存用户排序和过滤（在我的情况下是客户端），并且由于其他原因我们不能使用网格函数 getOptions/setOptions。 即使您设置了 autobind:false，如果您看到 autobind 的定义，这也不会像您预期的那样工作：

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

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

当您执行 dataSource.sort() 时，会触发 change 事件，然后在 dataSource 中隐式执行 read （这就是为什么你有第二个服务器读取）。

因此，您需要做的是创建一个具有所需排序选项的新数据源，然后显式调用 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();

希望对您有所帮助。 问候！