Kendo分层网格:如何将子网格行数据传递至更新函数
我来帮你解决Kendo分层网格的这个问题——要在子网格更新时获取编辑行的Phrasetext和PhraseType值其实有几种可靠的方式,我结合你提到的自定义下拉编辑器场景给你拆解一下:
方法1:直接从更新事件的模型中取值(最推荐)
如果你的子网格已经正确绑定了数据源,并且自定义编辑器和字段名对应,Kendo会自动把编辑的同步到行模型里。在update事件里直接提取模型属性就行:
// 子网格的配置示例 $("#your-subgrid").kendoGrid({ columns: [ { field: "Phrasetext", title: "短语文本" }, { field: "PhraseType", title: "短语类型", // 你的自定义下拉编辑器 editor: function(container, options) { $("<input name='PhraseType'/>").appendTo(container).kendoDropDownList({ dataSource: yourTypeDataSource, dataTextField: "TypeName", dataValueField: "TypeId", value: options.model.PhraseType // 绑定当前模型值 }); } }, { command: ["edit", "destroy"] } ], // 其他配置(数据源、分层网格关联等)... update: function(e) { // 直接从编辑模型中获取两个字段的值 const phraseText = e.model.Phrasetext; const phraseType = e.model.PhraseType; // 现在就可以把这两个值传递给你的数据库更新逻辑了 // 比如调用后端接口: // fetch("/api/update-phrase", { // method: "POST", // body: JSON.stringify({ // Id: e.model.Id, // Phrasetext: phraseText, // PhraseType: phraseType // }) // }); } });
方法2:从编辑容器中直接查找控件取值
如果遇到模型同步异常的情况,也可以直接从编辑行/弹窗的容器里定位控件获取值:
update: function(e) { const container = e.container; // 获取Phrasetext输入框的值 const phraseText = container.find("input[name='Phrasetext']").val(); // 获取自定义下拉编辑器的选中值 const phraseTypeDropdown = container.find("input[name='PhraseType']").data("kendoDropDownList"); const phraseType = phraseTypeDropdown ? phraseTypeDropdown.value() : null; // 验证值后执行更新逻辑 if (phraseText && phraseType) { // 你的数据库更新操作 } }
方法3:通过edit事件提前缓存编辑元素
如果需要实时跟踪编辑状态,可以在子网格的edit事件里先把编辑控件存起来,后续更新时直接取用:
$("#your-subgrid").kendoGrid({ edit: function(e) { // 缓存当前编辑的控件到网格实例上 this.editedControls = { phraseTextInput: e.container.find("input[name='Phrasetext']"), phraseTypeDropdown: e.container.find("input[name='PhraseType']").data("kendoDropDownList") }; }, update: function(e) { // 从缓存的控件中取值 const phraseText = this.editedControls.phraseTextInput.val(); const phraseType = this.editedControls.phraseTypeDropdown.value(); // 执行更新 yourUpdateApiCall(phraseText, phraseType, e.model.Id); } });
几个关键注意点
- 自定义下拉编辑器的
name属性必须和字段名(PhraseType)一致,这样Kendo才能自动同步模型值 - 如果是行内编辑模式,
e.container就是当前编辑的<tr>元素,查找控件的方式和弹窗编辑一致 - 更新前建议加简单的非空验证,避免无效数据提交
内容的提问来源于stack exchange,提问作者IrishMickeyWard




