javascript 从剑道网格中获取选中的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23583867/
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
Getting checked rows from kendo grid
提问by user3623803
I have a kendo grid with a checked box column .I have been trying to get the dataitem rows when the corresponding check boxes are checked.On click of a button , I need to get only the checked rows in JSon .Here is a JSfiddle I have been playing with.It gets only the Id rather than the row data.I have been trying to modify so that it can return the entire row data .
我有一个带有复选框列的剑道网格。当相应的复选框被选中时，我一直试图获取数据项行。单击按钮时，我只需要获取 JSon 中选中的行。这是我的 JSfiddle一直在玩。它只获取 Id 而不是行数据。我一直在尝试修改，以便它可以返回整个行数据。
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
//Grid definition
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
//define dataBound event handler
toolbar: ["create"],
columns: [
//define template column with checkbox and attach click event handler
{ template: "<input type='checkbox' class='checkbox' />" },
"ProductName", {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "100px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "100px"
}, {
field: "Discontinued",
width: "100px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "172px"
}
],
editable: "inline"
}).data("kendoGrid");
//bind click event to the checkbox
grid.table.on("change", ".checkbox" , selectRow);
$("#showSelection").bind("click", function () {
var items = [];
for(var i in checkedrows){
if(checkedrows[i]){
items.push([i]);
}
}
alert(JSON.stringify(itemss));
});
});
var checkedrows = {};
var itemss =[];
//on click of the checkbox:
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dItem = grid.dataItem(row);
checkedrows[dItem.id] = checked;
if (checked) {
itemss.push(dItem)
//-select the row
}
else
{
itemss.pop(dataItem);
}
}
the row get can be accessed by the dataItem ,but how to get the dataItem based on the index .Thanks.
行 get 可以通过 dataItem 访问，但是如何根据索引获取 dataItem 。谢谢。
回答by Rui Martins
To get just the checked boxes, I use this
为了只获得选中的框，我使用这个
var grid = $("#Grid").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each(function (index) {
whatever you need done.
});
回答by Lars H?ppner
You could store the selected items by uid, then get them from the data source when needed.
您可以通过 存储所选项目uid，然后在需要时从数据源获取它们。
Select handler:
选择处理程序：
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedrows[dataItem.uid] = checked;
}
To get the serialized array of items:
要获取序列化的项目数组：
function getSerializedSelectedRows() {
var items = [],
item,
grid = $("#grid").data("kendoGrid");
for (var uid in checkedrows) {
if (checkedrows.hasOwnProperty(uid)) {
if (checkedrows[uid]) {
item = grid.dataSource.getByUid(uid);
items.push(item);
}
}
}
return JSON.stringify(items);
}
(demo)
（演示）
回答by Postlagerkarte
The accepted answer was correct in 2014 but now the api has improved. You can use the following snippet to get the data items. Note that checked rows will also be selected and thus be returned from the grid.select() call.
接受的答案在 2014 年是正确的，但现在 api 有所改进。您可以使用以下代码段来获取数据项。请注意，选中的行也将被选中，因此会从 grid.select() 调用中返回。
//get the grid
var grid = $("#grid").data("kendoGrid");
// array to store the dataItems
var selected = [];
//get all selected rows (those which have the checkbox checked)
grid.select().each(function(){
//push the dataItem into the array
selected.push(grid.dataItem(this));
});
回答by atik sarker
You can check this
你可以检查这个
var gridData2 = $("#CustomerAccountManagerKendoGrid2").data("kendoGrid").dataSource.data();
var gEmpID2 = GetSelectedEmpID(gridData2);
function GetSelectedEmpID(gridData) {
for (var i = 0; i < gridData.length; i++) {
if (gridData[i].SelectStatus == true) {
return gridData[i].GEmployeeGenInfoID;
}
}
}
you can also see this
你也可以看到这个
