use*_*803 3 javascript jquery kendo-ui kendo-grid kendo-datasource
我有一个带有复选框列的kendo网格.我在检查相应的复选框时一直试图获取dataitem行.单击一个按钮,我只需要获取JSon中的已检查行.这是一个JSfiddle I一直在玩.它只获取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);
}
}
Run Code Online (Sandbox Code Playgroud)
data get可以访问row get,但是如何根据索引获取dataItem.谢谢.
为了得到复选框,我使用它
var grid = $("#Grid").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each(function (index) {
whatever you need done.
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
17519 次 |
| 最近记录: |