从剑道网格中获取检查的行
Posted
技术标签:
【中文标题】从剑道网格中获取检查的行【英文标题】：Getting checked rows from kendo grid 【发布时间】：2014-06-28 07:55:30 【问题描述】：我有一个带有复选框列的剑道网格。当相应的复选框被选中时，我一直在尝试获取数据项行。单击按钮时，我只需要在 JSon 中获取选中的行。这里是我一直在玩的一个 JSfiddle。它只获取 Id 而不是行数据。我一直在尝试修改，以便它可以返回整个行数据。
http://jsfiddle.net/Xg56P/31/
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);
行get可以通过dataItem访问，但是如何根据索引获取dataItem。谢谢。
【问题讨论】：
【参考方案1】：为了获得选中的复选框，我使用了这个
var grid = $("#Grid").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each(function (index)
whatever you need done.
);
【讨论】：
【参考方案2】：接受的答案在 2014 年是正确的，但现在 api 已经改进。您可以使用以下 sn -p 来获取数据项。请注意，选中的行也会被选中，因此会从 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));
);
【讨论】：
【参考方案3】：您可以通过uid 存储所选项目，然后在需要时从数据源中获取它们。
选择处理程序：
function selectRow()
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedrows[dataItem.uid] = checked;
获取序列化的项目数组：
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)
【讨论】：
【参考方案4】：你可以检查一下
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;
你也可以看到this
【讨论】：
以上是关于从剑道网格中获取检查的行的主要内容，如果未能解决你的问题，请参考以下文章