备注:主要介绍的是其中一种思路,代码可能有部分不全或者失误
CHTML:
JS:
初始化kendo grid 表:
//initial Telerik Grid control
var gridDataSource = new kendo.data.DataSource({
data: someDateObject,
pageSize: 15
});
var $myGrid = $("#myGrid");
$myGrid.kendoGrid({
toolbar: [
{ template: kendo.template($("#cust_toolbar").html()) }
],
dataSource: gridDataSource,
height: 500,
groupable: true,
sortable: true,
filterable: {
extra: false
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "ProductName",
title: "Name",
width: 300,
filterable: true,
template: '#= ProductName #'
}, {
field: "Location",
title: "Location",
width: 400,
filterable: true,
}, {
field: "EffectiveDate",
title: "Date",
width: 200,
filterable: true,
}, {
title: " ", //checkbox
width: 150,
template: "",
filterable: false
}],
});
checkbox 监听:(监听checkbox的选定状态disable和enable两个按钮(.k-cust-edit, .k-cust-delete))
$(".check_row").change(function () {
app.schedule.selRows = $(".check_row:checked");
if (app.schedule.selRows.length === 0) {
$(".k-cust-edit").addClass("not-active");
$(".k-cust-delete").addClass("not-active");
} else {
if ($(".k-cust-edit").hasClass("not-active")) {
$(".k-cust-edit").removeClass("not-active");
}
if ($(".k-cust-delete").hasClass("not-active")) {
$(".k-cust-delete").removeClass("not-active");
}
}
});
css: not-active
.not-active {
pointer-events: none;
cursor: default;
}
toolbar 按钮监听:
//Reomve the selected records
$(".k-cust-delete", grid.element).off('click').on("click", function (ev) {
selRows = $(".check_row:checked");
//do something..
}
});
$(".k-cust-edit").addClass("not-active");
//Clone the selected records
$(".k-cust-edit", grid.element).off('click').on("click", function (ev) {
app.schedule.selRows = $(".check_row:checked");
//do something..
}
});