Kendo ui 如何在剑道UI网格中将复选框限制为5
如何在剑道UI网格中将复选框限制为5 我正在使用带有复选框的剑道UI网格。我想将复选框选择限制为5 请查找所附代码Kendo ui 如何在剑道UI网格中将复选框限制为5,kendo-ui,Kendo Ui,如何在剑道UI网格中将复选框限制为5 我正在使用带有复选框的剑道UI网格。我想将复选框选择限制为5 请查找所附代码 $(function () { $("#grid").kendoGrid({ dataSource: { pageSize: 10, transport: { read: { url: "url",
$(function () {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "url",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "string"
},
Title: {
type: "string"
},
OrderDate: {
type: "date",
defaultValue: null
}
}
}
}
},
pageable: true,
persistSelection: true,
change: onChange,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Title" },
{ field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", encoded: true }
]
});
});
function onChange(arg) {
//console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}
提前感谢这是根据您的要求测试的代码，唯一的区别是复选框列是用模板创建的 参考链接：
剑道UI片段
显示所选ID
$（文档）.ready（函数（）{
//数据源定义
var crudServiceBaseUrl=”https://demos.telerik.com/kendo-ui/service",
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{
模型：kendo.stringify（options.models）
};
}
}
},
批次：对，
页面大小：20，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{
可编辑：false，
可为空：真
},
产品名称：{
验证：{
必填项：true
}
},
单价：{
键入：“数字”，
验证：{
要求：正确，
min:1
}
},
中止：{
类型：“布尔”
},
单位股票：{
键入：“数字”，
验证：{
分:0,，
必填项：true
}
}
}
}
}
});
//网格定义
var grid=$（“#grid”）.kendoGrid({
数据源：数据源，
pageable:对，
身高：430，
//定义数据绑定事件处理程序
数据绑定：onDataBound，
工具栏：[“创建”]，
栏目：[
//使用复选框定义模板列并附加单击事件处理程序
{模板：'}，
“产品名称”{
字段：“单价”，
标题：“单价”，
格式：“{0:c}”，
宽度：“100px”
}, {
字段：“单位股票”，
标题：“库存单位”，
宽度：“100px”
}, {
字段：“中止”，
宽度：“100px”
}, {
命令：[“编辑”、“销毁”]，
标题：“，
宽度：“172px”
}
],
可编辑：“内联”
}).数据（“kendoGrid”）；
//将单击事件绑定到复选框
网格.table.on（“单击“，”.checkbox”，选择行）；
$（“#显示选择”）.bind（“单击”，函数（）{
检查的var=[]；
for（checkedds中的变量i）{
如果（检查EDIDS[i]）{
检查。推（i）；
}
}
警报（已选中）；
});
});
var checkedds={}；
//单击复选框后：
函数selectRow（）{
////*******禁止选择5条以上的记录*************************
if（Object.keys（checkedds）.length>=5）
{
这个.checked=false；
}
/// **********************************
var checked=此项已检查，
行=$（此）.tr，
网格=$（“#网格”）.data（“kendoGrid”），
dataItem=grid.dataItem（行）；
checkedIds[dataItem.id]=已选中；
如果（选中）{
//-选择行
row.addClass（“k-state-selected”）；
}否则{
//-删除所选内容
row.removeClass（“k-state-selected”）；
}
}
//在数据绑定事件上还原以前选定的行：
函数onDataBound（e）{
var view=this.dataSource.view（）；
for（变量i=0；i如果您有问题或顾虑，请告诉我。这是根据您的要求测试的代码，唯一的区别是使用模板创建的复选框列 参考链接：
剑道UI片段
显示所选ID
$（文档）.ready（函数（）{
//数据源定义
var crudServiceBaseUrl=”https://demos.telerik.com/kendo-ui/service",
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{
模型：kendo.stringify（options.models）
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="showSelection">Show selected IDs</button>
<script>
$(document).ready(function () {
//DataSource definition
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/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
dataBound: onDataBound,
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("click", ".checkbox" , selectRow);
$("#showSelection").bind("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
alert(checked);
});
});
var checkedIds = {};
//on click of the checkbox:
function selectRow() {
//// *********Prevent to select more than 5 record*************************
if(Object.keys(checkedIds).length>=5)
{
this.checked=false;
}
/// **********************************
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedIds[dataItem.id] = checked;
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
//on dataBound event restore previous selected rows:
function onDataBound(e) {
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++){
if(checkedIds[view[i].id]){
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".checkbox")
.attr("checked","checked");
}
}
}
</script>
</body>
</html>