我遇到一个奇怪的问题，我有Kendo UI Grid和Hierarchy Grid，两者都可以批量生成进行编辑。
问题是当我编辑细节网格主和细节网格刷新，如果我再编辑一次刷新两次，下次刷新3次。有一种循环正在进行，我无法弄清楚。以下是jsfiddle url：
var data = {
"Conditions": [
{
"ConditionId": 1651239,
"Priority": 10,
"Description": " ARRIVAL TIME IN 12:12 | DAY OF WEEK IN 3 | DEPARTURE AIRPORT = IAD",
"OperationCode": {
"Disabled": false,
"Group": null,
"Selected": false,
"Text": "Add",
"Value": "A"
},
"Contents": [
{
"Id": 114605,
"ConditionId": 1651239,
"QtyCalculationType": 3,
"FixedLoadQty": null,
"NperPax": null,
"MperPax": null,
"LoadPercentage": 20,
"Portion": 1,
"RoundMethod": {
"Disabled": false,
"Group": null,
"Selected": false,
"Text": "S - Standard Rounding",
"Value": "S"
},
"MinQty": null,
"MaxQty": null,
"Factor": 2,
"LoadRatio": {
"Id": 364,
"Code": "1/80"
},
"PaxFigCalc": {
"Disabled": false,
"Group": null,
"Selected": false,
"Text": "",
"Value": "0"
},
"PaxFactor": null,
"RotationPlanCode": null,
"RotationPlanNumber": null
},
{
"Id": 155296,
"ConditionId": 1651239,
"QtyCalculationType": 0,
"FixedLoadQty": null,
"NperPax": null,
"MperPax": null,
"LoadPercentage": null,
"Portion": 0,
"RoundMethod": {
"Disabled": false,
"Group": null,
"Selected": false,
"Text": "",
"Value": " "
},
"MinQty": null,
"MaxQty": null,
"Factor": 0,
"LoadRatio": {
"Id": 0,
"Code": ""
},
"PaxFigCalc": {
"Disabled": false,
"Group": null,
"Selected": false,
"Text": "",
"Value": "0"
},
"PaxFactor": null,
"RotationPlanCode": null,
"RotationPlanNumber": null
}
]
}
]
};
$("#grid").kendoGrid({
editable: true,
pageable:false,
scrollable:true,
height: 450,
sortable:true,
columns: [
{ field: "Priority", title: "Pri", attributes: { "class": "tc editable-cell" }, width: "50px"},
{ field: "OperationCode", title: "Operations",attributes: { "class": "tc" }, width:"100px", template:"#=OperationCode.Text#" },
{ field: "Description", title: "Description",attributes: { "class": "desc" } },
],
dataSource: {
batch: true,
data : data.Conditions,
schema : {
model : {
id : "ConditionId",
fields : {
ConditionId: { editable: false, nullable: true },
OperationCode: { editable: false },
Description: { editable: false },
Priority: {
validation: {
required: true,
prioValidation: function (input) {
if (input.is("[name='Priority']")) {
input.attr("data-prioValidation-msg", "Enter a number");
return /^[0-9]/.test(input.val());
}
return true;
}
},
type: "number"
}
}
}
}
},
detailInit : detailGrid,
dataBound : gridReady
});
function gridReady(e){
this.expandRow(this.tbody.find("tr.k-master-row"));
console.log("Master Grid refreshed.")
}
function detailGrid(e) {
e.detailRow.find(".k-hierarchy-cell").addClass("c"+e.data.ConditionId);
$("<div class='"+e.data.uid+"' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
data : e.data.Contents,
batch: true,
schema: {
model : {
id : "Id",
fields: {
FixedLoadQty: { type: "number", nullable: true, validation: { required: false } },
NperPax: { type: "number", nullable: true, validation: { required: false } },
MperPax: { type: "number" , nullable: true, validation: { required: false } },
Portion: { type: "number" , nullable: true, validation: { required: false } },
RoundMethod: { nullable: true, validation: { required: false } },
MinQty: { type: "number" , nullable: true, validation: { required: false } },
MaxQty: { type: "number", nullable: true, validation: { required: false } },
Factor: { nullable: true, validation: { required: false } },
LoadPercentage: { nullable: true, validation: { required: false } },
LoadRatio: { nullable: true, validation: { required: false } },
PaxFigCalc: { nullable: true, validation: { required: false } },
PaxFactor: { nullable: true, validation: { required: false } },
RotationPlanCode: { type: "number", nullable: true, validation: { required: false } },
RotationPlanNumber: { type: "number", nullable: true, validation: { required: false } }
}
}
}
},
scrollable: false,
sortable: false,
pageable: false,
editable: true,
navigatable: true,
columns: [
{ field: "FixedLoadQty", title:"Fixed Qty", width : 80, attributes: { "class": "editable-cell" } },
{ field: "NperPax", title:"Nper", width : 50, attributes: { "class": "editable-cell" } },
{ field: "MperPax", title:"Mpax", width : 50, attributes: { "class": "editable-cell" } },
{ field: "Portion", title:"Prtn", width : 50, attributes: { "class": "editable-cell" } },
{ field: "RoundMethod", title:"Rounding", width : 90, attributes: { "class": "editable-cell" }, template:"#=RoundMethod.Text#" },
{ field: "MinQty", title:"Min", width : 50, attributes: { "class": "editable-cell" } },
{ field: "MaxQty", title:"Max", width : 50, attributes: { "class": "editable-cell" } },
{ field: "Factor", title:"Factor", width : 80, attributes: { "class": "editable-cell" } },
{ field: "LoadPercentage", title:"Load %", width : 80, attributes: { "class": "editable-cell" } },
{ field: "LoadRatio", title:"Load Ratio", width : 100, attributes: { "class": "editable-cell" }, template:"#=LoadRatio.Code#" },
{ field: "PaxFigCalc", title:"Pax Fig", width : 80, attributes: { "class": "editable-cell" }, template:"#=PaxFigCalc.Text#" },
{ field: "PaxFactor", title:"Pax Factor", width : 90, attributes: { "class": "editable-cell" } },
{ field: "RotationPlanCode", title:"Rotation Type", width : 120, attributes: { "class": "editable-cell" } },
{ field: "RotationPlanNumber", title:"Rotation No", width : 100, attributes: { "class": "editable-cell" } }
],
save: function(e) {
// $("#QtyGrid").data("kendoGrid").dataSource.get(e.model.ConditionId).dirty = true;
// chkFields(e);
},
dataBound: gridReadyDetail
});
function test (c,o){
debugger
}
function gridReadyDetail (e) {
console.log("Detail Grid refreshed.")
var grid = this;
$(".delQtyContent").on("click", function (e) {
e.preventDefault();
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = grid.dataItem(tr);
$("#removeAlert .removeHeader").html("Confirm Content Removal");
$("#removeAlert .alertText").html("You have chosen to delete the quantity content. Do you wish to proceed?");
common.gridPopUp("open", "#removeAlert", window.gg.sacs.resources.Attention, "508px", true);
$("#removeAlert .action-continue").off().on("click", function (a) {
a.preventDefault();
if (data.id == 0) {
grid.dataSource.remove(data);
grid.dataSource["_destroyed"] = []
} else {
callAjax(baseUrl + "Operations/CateringRule/DeleteQtyContent?qtyContentId=" + data.Id + "&ruleId="+self.CRViewmodel.Id(), "POST")
.done(function (res) {
grid.dataSource.remove(data);
grid.dataSource["_destroyed"] = [] // cheat for kendo to clear the destroy function
});
}
common.gridPopUp("close", "#removeAlert");
toastr.success("Content has been removed.");
});
$("#noButton").click(function () {
common.gridPopUp("close", "#removeAlert");
})
})
applyValidations (this);
if (this.dataSource.data().length <2 ) {
this.tbody.find(".delQtyContent").remove();
}
}
function applyValidations (grid) {
/* var data = grid.dataSource.at(0);
data.fields["MaxQty"].editable = false;*/
// var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']"); // row
//var cell = row.children().eq(columnIndex); // cell
}
function chkFields(e) {
if (e.values.hasOwnProperty("FixedLoadQty") && e.values.FixedLoadQty != null) {
disableFields (group1,e)
}
}
function disableFields (grp,grid) {2
var row = grid.sender.tbody.find("[data-uid='" + grid.model.uid + "']");
$(grp).each(function (i,val) {
var columnIndex = grid.sender.wrapper.find(".k-grid-header [data-field=" + val + "]").index();
var cell = row.children().eq(columnIndex);
cell.removeClass("editable-cell");
//var data = grid.sender.dataSource.at(0);
//data.fields[val].editable = false
})
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/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/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
https://jsfiddle.net/euLmnmne/3/
任何帮助将受到高度赞赏。