Question

我有一个带有大数据源和分页的Kendo UI Grid。

我有一个事件触发我知道我想要选择的基础数据项，但不确定如何以编程方式页面/选择网格中的此项。如果该项目不在当前网格页面上，则当数据不在当前页面上时，我无法使用datasource.view（）来浏览。

有谁知道我如何通过其基础数据源对象选择项目？

我和@在哪里的情况类似： http://jsfiddle.net/Sbb5Z/1050/ 我可以使用以下内容获取数据项：

 change: function (e) {
      var selectedRows = this.select();
      var dataItem = this.dataItem(selectedRows[0]);
   }

但后来我不知道如何在另一个网格中选择同一行。

基本上在一个网格的select事件中，我想去另一个网格中选择相同的项目。这些数据源不同，因为它们具有不同的页面设置，但它们是相同的基础数据数组。

我在目标网格中有数据项 - 但我不知道如何在目标网格中分页/选择它。

编辑： 我想出的最好的方法是创建一个与原始数据源具有相同参数的数据源，并以编程方式对其进行分页，直到找到我要查找的内容。当然必须有更好的方法吗？

Answer 1

我从Telerik那里得到了这个，并且有点干净了：

http://jsfiddle.net/RZwQ2/

function findDataItem(theGrid, dataItem) {
//get grid datasource
var ds = theGrid.dataSource;

var view = kendo.data.Query.process(ds.data(), {
                filter: ds.filter(),
                sort: ds.sort()
            })
            .data;

var index = -1;
// find the index of the matching dataItem
for (var x = 0; x < view.length; x++) {
    if (view[x].Id == dataItem.Id) {
        index = x;
        break;
    }
}

if (index === -1) {
    return;
}

var page = Math.floor(index / theGrid.dataSource.pageSize());    
var targetIndex = index - (page * theGrid.dataSource.pageSize()) + 1;    
//page is 1-based index    
theGrid.dataSource.page(++page);
//grid wants a html element. tr:eq(x) by itself searches in the first grid!    
var row = $("#grid2").find("tr:eq(" + targetIndex + ")");
theGrid.select(row);

console.log('Found it at Page: ' + page + 'index: ' + targetIndex);

}

Answer 2

您需要在数据中使用公共ID或字段来唯一标识其他dataSource中的对象，因为剑道生成的UID在两个不同的DataSource实例中不会相同。

通常，您在绑定到网格的模型中定义id，您可以使用该ID快速从数据源中提取项目

change: function (e) {
  var selectedRows = this.select();
  var dataItem = this.dataItem(selectedRows[0]);

  var otherItem = otherGrid.dataSource.get(dataItem.id) // will get
}

如果您没有在模型中指定公共ID字段，但确实知道如何找到该项目，您可以遍历数据源寻找它

var selectedRows = this.select();
var dataItem = this.dataItem(selectedRows[0]);
var data = otherGrid.dataSource.view();

var otherItem;

for ( var i = 0; i < data.length; i++ ){
    if( data[i].myCommonField === dataItem.myCommonField ) {
       otherItem = data[i];
       break;
    }
}

更新：

选择您需要执行此操作的其他网格中的项目：

 var elements = otherGrid.items(),
     element;

 element = elements.filter("[data-uid='" + otherItem.uid + "']")

 otherGrid.select(element) // to select just the one item

 //OR
 otherGrid.select( otherGrid.select().add(element) ) // to add the item to the current selection

我提供的小提琴使用了一个非常旧的版本的剑道网格，这将无法正常工作...我刚刚意识到。你被困在2011版吗？我可能至少在理论上可以得到一些东西，但上面的内容将适用于较新的版本

essentailly你需要将你拥有的项目与DOM元素相匹配，在以后的版本中你可以使用UID，因为dom元素都会在它们上面获得“data-uid”，如果你在id到你的model: { } def可以让tr元素有data-id，你可以使用jquery选择正确的选择。我使用items()1 method which also doesn't seem to exist on the early version but you can use grid2.table.find（“tr [data-id =]”）`而不是我相信

Answer 3

假设div id为 Grid ，那么首先我们需要找到kendoGrid

var grid = $("#Grid").data("kendoGrid");

然后调用 grid.select（）以选择当前选定的一个最后调用 grid.dataItem（）来获取所选项目。

var selectedDataItem = grid.dataItem(grid.select());

Answer 4

为了扩展其他人，我有一个方法需要一个（或多个）id来匹配：

function selectItems(grid, idAr)
{
  if(!idAr instanceof Array)idAr = [idAr];
  var items = grid
    .items()
    .filter(function(i, el)
    { 
      return idAr.indexOf(grid.dataItem(el).Id) !== -1; 
    });
  grid.select(items);
}

*显然，Id可以替换为数据项中的任何字段。

用于选择：

selectItems(grid, "5");
selectItems(grid, ["6", "7"]);

Kendo UI Grid按数据项选择

4 个答案: