javascript Kendo UI Grid 按数据项选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19775423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI Grid select by data item
提问by Yablargo
I have a Kendo UI Grid with a large datasource and paging.
我有一个带有大型数据源和分页的 Kendo UI 网格。
I have an event that fires where I know the underlying data item that I want to select, but am unsure on how to programatically page/select this item in the grid. If the item is not on the current grid page, I cannot use datasource.view() to poke through when the data is not on the current page.
我有一个事件，在我知道要选择的基础数据项的地方触发，但不确定如何以编程方式在网格中分页/选择此项目。如果该项目不在当前网格页面上，当数据不在当前页面上时，我无法使用 datasource.view() 进行查看。
Does anyone know how I can select an item by its underlying data source object?
有谁知道我如何通过其底层数据源对象选择一个项目？
I've got a similar situation to where i am at @: http://jsfiddle.net/Sbb5Z/1050/I can get the data item with the following:
我的情况与我在 @ 的情况类似：http: //jsfiddle.net/Sbb5Z/1050/我可以通过以下方式获取数据项：
change: function (e) {
var selectedRows = this.select();
var dataItem = this.dataItem(selectedRows[0]);
}
But then I don't know how to select the same row in the other grid.
但后来我不知道如何在另一个网格中选择同一行。
Basically in the select event of one grid, I want to go select the same item in another grid. These are not the same datasource, as they have different page setups, but it is the same underlying data array.
基本上在一个网格的选择事件中，我想在另一个网格中选择相同的项目。它们不是相同的数据源，因为它们具有不同的页面设置，但它们是相同的底层数据数组。
I have the data item in the target grid -- but I have no clue how to page/select it in the target grid.
我在目标网格中有数据项——但我不知道如何在目标网格中分页/选择它。
Edit:The best I've come up with sofar is creating a datasource with the same parameters as the original, and paging through it programatically, until I find what I am looking for. Surely there must be a better way?
编辑：到目前为止，我想出的最好的方法是创建一个与原始参数相同的数据源，并以编程方式对其进行分页，直到找到我要查找的内容。当然一定有更好的方法吗？
回答by Yablargo
I've gotten this back from Telerik, and is a little cleaner:
我从 Telerik 拿回了这个，并且更干净了：
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);
}
回答by monastic-panic
You need to have a common id, or field in the data that you can use to uniquely identify the object in the other dataSource, because the kendo generated UID's are not going to be the same accross two different DataSource instances.
您需要在数据中有一个公共 ID 或字段，您可以使用它来唯一标识另一个数据源中的对象，因为剑道生成的 UID 在两个不同的数据源实例中不会相同。
Most generally you define the id in the Model you bound to the grid, which you can use to quickly pluck items from the datasource
大多数情况下，您在绑定到网格的模型中定义 id，您可以使用它从数据源中快速提取项目
change: function (e) {
var selectedRows = this.select();
var dataItem = this.dataItem(selectedRows[0]);
var otherItem = otherGrid.dataSource.get(dataItem.id) // will get
}
if you don't have a common ID field specified in the model, but do know how to find the item you can loop through the data source looking for it
如果您没有在模型中指定通用 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;
}
}
UPDATE:
更新：
to select the item in the other grid you need to do this:
要选择另一个网格中的项目，您需要执行以下操作：
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
I the fiddle you provided uses a really old version of kendo Grid where this won't work...I just realized. are you stuck on the 2011 version? I can probably get something to work at least in theory but the above will work in the newer versions
我你提供的小提琴使用了一个非常旧的kendo Grid版本，这不起作用......我刚刚意识到。你是卡在2011版本吗？我可能至少在理论上可以得到一些工作，但上述内容将适用于较新的版本
essentailly you need to match the item you have to a DOM element, in later versions you can use UID because the dom elements all get that on them "data-uid" it looks like if you at idto your model: { }def you can get the tr elements to have data-idwhich you can use to select the right select using jquery. I use the items()1 method which also doesn't seem to exist on the early version but you can usegrid2.table.find("tr[data-id=]")` instead I believe
essentailly你需要你有一个DOM元素的项目相匹配，在以后的版本中，你可以使用UID因为DOM元素都拿到他们的“数据的uid”它看起来像，如果你在id你的model: { }高清，你可以得到的TR元素拥有data-id它，您可以使用 jquery 选择正确的选择。我使用items()1 method which also doesn't seem to exist on the early version but you can usegrid2.table.find("tr[data-id=]")` 代替我相信
回答by Ranga Reddy
Assume div id will be Gridthen first we need find the kendoGrid
假设 div id 将是Grid那么首先我们需要找到 kendoGrid
var grid = $("#Grid").data("kendoGrid");
then call the grid.select()to select the currently selected one
finally call the grid.dataItem()to get the selected item.
然后调用grid.select()选择当前选中的项目，最后调用grid.dataItem()获取选中的项目。
var selectedDataItem = grid.dataItem(grid.select());
回答by Josh Mc
To expand upon others, I have a method that takes a single (or multiple) ids to match against:
为了扩展其他人，我有一种方法可以匹配单个（或多个）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);
}
* Obviously Id could be replaced by any field that is in your data item.
* 显然，Id 可以被数据项中的任何字段替换。
Use for selection:
用于选择：
selectItems(grid, "5");
selectItems(grid, ["6", "7"]);
