You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Kendo分层网格:如何将子网格行数据传递至更新函数

我来帮你解决Kendo分层网格的这个问题——要在子网格更新时获取编辑行的PhrasetextPhraseType值其实有几种可靠的方式,我结合你提到的自定义下拉编辑器场景给你拆解一下:

方法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

火山引擎 最新活动