KenDoGrid中字段动态可编辑

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#KenGrid #可编辑

KenDoUI 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在KenDoGrid组件中实现字段的动态可编辑功能，探讨其在数据管理中的应用和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "id", hidden:true},
    { field: "choose", title:"请选择", values:[{text:"姓名",value:1},{text:"年龄",value:2}]},
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      {  name: "Jane Doe", age: 30 },
      {  name: "John Doe", age: 33 }
    ],
    schema: {
      model: {
        id: "id",
        fields: {
          choose: {},
          name:{},
          age:{type:"number"}
        }
      }
    }
  },
  editable: {
			mode: "inline"
		},
  toolbar:["create"],
  edit: function(e) {
    e.container.find("input[name=name]").kendoAutoComplete();
    e.container.find("input[name=name]").removeClass("k-autocomplete");
    var name = e.container.find("input[name=name]").data("kendoAutoComplete");
    var age = e.container.find("input[name=age]").data("kendoNumericTextBox");
    name.enable(false);
    age.enable(false);
    $("select[name='choose']").eq(0).change(function(e){
      if(e.target.value == 1){
        name.enable(true);
        age.enable(false);
      }
      if(e.target.value == 2){
        name.enable(false);
        age.enable(true);
      }
    })
  }
});
</script>