Jquery选择器检测点击在Grid上的某个单元格，且单元格的class为cell-value
检测到Grid单元格被点击且单元格的class为cell-value
第一步 定义
定义右键
//*************************右键菜单 开始********************************
$("#KeySamplePointSearch_ContextMenu").kendoExtContextMenu({
width: "175px",
targets: "#ReportSearchIndex_Grid .cell-value",
closeOnClick: true,
items: [
{
text: '样品详情',
},
{
text: '调整排程',
},
{
text: '取消样品',
}
],
itemSelect: function (e) {
var selected = REPORTINGGRID.select();
var selectedCellCount = selected.length;
//获得选中行的信息
var row = REPORTINGGRID.select().closest("tr");
ListTime = [];
ListBlock = [];
var Colome;
for (var i = 0; i < row.length; i++) {
ListTime.push(REPORTINGGRID.dataItem(row[i]).TimeNumber);
}
for (var i = 0; i < selectedCellCount; i++) {
Colome = selected[i].cellIndex;
ListBlock.push(selected[i].innerText);
}
debugger
Today = new Date(currentFirstDate);
Today.setDate(Today.getDate() + Colome - 1);
Today.setHours(0);
Today.setMinutes(0)
Today.setMilliseconds(0)
Today.setSeconds(0);
switch ($(e.item).text().trim()) {
case '样品详情':
$("#SampleInfo").kendoWindow({
width: "1000px",
animation: false,
title: "样品详情",
modal: true,
height: "530px",
buttons: [{
name: '确定',
click: function (e) {
}
},
{
name: '取消',
click: function (e) {
}
}]
}).data("kendoWindow").center().open();
break;
case '调整排程':
SampleAdd = $("#SampleAdd").kendoExtDialog({
width: "800px",
animation: false,
title: "调整排程",
modal: true,
height: "530px",
buttons: [{
name: '确定',
click: function (e) {
var SelectGridUpdate = GridInfoUpdate.dataItem(GridInfoUpdate.select());
AddTzfunction(ListTime, ListBlock, SelectGridUpdate, Today);
SampleAdd.close();
}
},
{
name: '取消',
click: function (e) {
SampleAdd.close();
}
}]
}).data("kendoExtDialog").center().open();
Tzfunction();
break;
case '采样频率':
break;
case '取消样品':
$.when(kendo.ui.ExtOkCancelDialog.show({
title: "OK/Cancel",
message: "请确认取消排程！",
})
).done(function (response) {
if (response.button == "OK") {
DeleteSchedulefunction(ListTime, ListBlock, Today);
}
});
break;
default:
break;
}
}
});
//*************************右键菜单 结束**********************************
定义grid
//初始化grid
$("#ReportSearchIndex_Grid").kendoGrid({
selectable: "multiple cell",
columns: [{
field: "Time",
title: "时间",
width: '8%',
}, {
field: "Mon",
title: C[0],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[0] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, {
field: "Tue",
title: C[1],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[1] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, {
field: "Wed",
title: C[2],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[2] ? ' border-style: solid; border-width: 1px;border-color:RGB(0,0,204) ' : ''#"
},
}, {
field: "Thu",
title: C[3],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[3] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, {
field: "Fri",
title: C[4],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[4] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, {
field: "Sat",
title: C[5],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[5] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, {
field: "Sun",
title: C[6],
width: '12%',
attributes: {
"class": "cell-value",
style: "#=isDay === C[6] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
}, ],
});
REPORTINGGRID = $("#ReportSearchIndex_Grid").data("kendoGrid");
设置Grid的单元格class为cell-value
attributes: {
"class": "cell-value",
style: "#=isDay === C[6] ? 'border-style: solid; border-width: 1px;border-color:RGB(0,0,204);' : ''#"
}
第二步 检索
JQuery检索
targets: “#ReportSearchIndex_Grid .cell-value”,
这个的含义找到grid，且class为cell-value
第三部 触发事件
itemSelect: function (e) {
}