logo标签列表

Kendo UI 网格按数据项选择

javascriptkendo-uikendo-grid
3
我有一个带有大量数据源和分页的Kendo UI网格。
我有一个事件会发生，我知道要选择的基础数据项，但不确定如何以编程方式在网格中翻页/选择此项。如果该项不在当前网格页面上，则无法使用datasource.view()来查看当数据不在当前页面时的情况。
有人知道如何按其基础数据源对象选择项目吗？
我遇到了与此类似的情况： http://jsfiddle.net/Sbb5Z/1050/ 我可以使用以下代码获取数据项：
 change: function (e) {
      var selectedRows = this.select();
      var dataItem = this.dataItem(selectedRows[0]);
   }

但是我不知道如何在另一个网格中选择相同的行。 基本上，在一个网格的选择事件中，我想要选择另一个网格中的相同项目。这些不是相同的数据源，因为它们具有不同的页面设置，但是它们是相同的基础数据数组。 我在目标网格中有数据项——但我不知道如何在目标网格中进行分页/选择。 编辑： 到目前为止，我想到的最好的方法是创建一个与原始参数相同的数据源，并通过编程方式对其进行分页，直到找到我要查找的内容。肯定有更好的办法吧？
4个回答
11

我从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);

}
3
你需要有一个公共id或数据中的字段，可以用来在另一个数据源中唯一地识别对象，因为kendo生成的UID在两个不同的DataSource实例之间不会相同。
通常情况下，你会在与网格绑定的模型中定义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

您提供的小提琴使用了一个非常旧的kendo Grid版本，在那里这行代码不起作用...我刚意识到，您被困在2011版本上吗？理论上我可能可以让某些东西工作，但是上述代码将在更新的版本中有效。
本质上，您需要将拥有的项目与DOM元素匹配，在较新的版本中，您可以使用UID，因为DOM元素都会在上面获取“data-uid”，如果您将id添加到model：{ } def中，则可以使tr元素具有data-id，您可以使用jquery选择正确的选择。我使用的items()方法在早期版本中似乎也不存在，但我认为您可以使用`grid2.table.find("tr[data-id=]")`代替。
我有一个通用的ID（这个小例子不是最好的）。我可以在目标数据源中找到数据项，但是如何让网格分页/选择该数据项呢？我的主要问题是当该项不在网格的当前页面时。我将更新这个小例子。 - Yablargo
问题就在这里。Grid2.items() 只包含当前页面的内容。 - Yablargo
1
好的，是的，您只能选择存在的内容，您想要翻页直到元素存在吗？在这种情况下，首先导航到正确的页面：grid2.dataSource.indexOf(otherItem) / pagesize以获取页面，使用page()方法转到该页面，然后执行items()选择。 - monastic-panic
如果有排序，它仍然会出现问题。我真的不想浏览所有页面并查找。似乎很愚蠢你不能做这种事情。 - Yablargo
1
嗯，我建议使用.view()方法获取数据而不是.data()（或._data），这将保留您的排序，但我想它也会考虑页面，并仅返回当前页面？您可以将原始数据加载到新的数据源中，并应用当前的过滤器、排序，但不包括页面，然后获取索引。我不知道这是否比循环更好，但可能是。类似于new newds.query($.extend(true {},dataSource.filter(), dataSource.sort())) - monastic-panic
显示剩余4条评论
2

假设div的id将会是Grid，那么首先我们需要找到kendoGrid。

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

然后调用 grid.select() 来选择当前选定的项，最后调用 grid.dataItem() 来获取所选项目。
var selectedDataItem = grid.dataItem(grid.select());
正确。OP需要通过对象引用在另一个列表中选择相同的项目。这并不是显式可用的，你必须遍历直到找到它，可惜了。 - Yablargo
我得到了grid.select不是一个函数（类型错误）的错误。 - Kala J
检查您是否已经正确地给出了div id。 - Ranga Reddy
1

为了进一步说明，我有一个方法，可以使用单个（或多个）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"]);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接