Kendo jQuery单数据源绑定多控件及增删改数据提交至控制器咨询

嘿，作为Kendo UI jQuery的新手，你的需求其实很常见——用单个数据源同时绑定多种控件，还要搞定CRUD操作和后端交互。我来一步步给你捋清楚怎么做：

这是核心，所有控件都靠它同步数据。我们直接配置好和后端控制器的交互逻辑：

// 创建共享数据源
var sharedDataSource = new kendo.data.DataSource({
  transport: {
    // 读取数据的后端接口
    read: {
      url: "/YourController/GetData",
      type: "GET",
      dataType: "json"
    },
    // 新增数据的后端接口
    create: {
      url: "/YourController/Create",
      type: "POST",
      dataType: "json",
      contentType: "application/json; charset=utf-8"
    },
    // 更新数据的后端接口
    update: {
      url: "/YourController/Update",
      type: "PUT",
      dataType: "json",
      contentType: "application/json; charset=utf-8"
    },
    // 删除数据的后端接口
    destroy: {
      url: "/YourController/Delete",
      type: "DELETE",
      dataType: "json"
    },
    // 把前端数据转为JSON格式传给后端
    parameterMap: function(data, operation) {
      if (operation !== "read" && data.models) {
        return JSON.stringify(data.models[0]); // 单条数据操作取第一个模型
      }
      return data;
    }
  },
  schema: {
    model: {
      id: "Id", // 替换成你的数据主键字段
      fields: {
        Id: { editable: false, nullable: true },
        Name: { type: "string", validation: { required: true } }
        // 其他字段按需添加，比如Age、Email等
      }
    }
  },
  pageSize: 10 // 分页大小，根据需求调整
});

绑定文本框 #

文本框一般显示单条数据，我们可以在数据源加载完成后绑定初始值，同时监听数据源变化自动同步：

// 初始化文本框
$("#nameTextBox").kendoTextBox({
  placeholder: "请输入名称"
});

// 数据源加载完成后设置初始值
sharedDataSource.read().then(function() {
  var dataList = sharedDataSource.data();
  if (dataList.length > 0) {
    $("#nameTextBox").data("kendoTextBox").value(dataList[0].Name);
  }
});

// 监听数据源变化，同步更新文本框
sharedDataSource.bind("change", function() {
  var dataList = this.data();
  if (dataList.length > 0) {
    $("#nameTextBox").data("kendoTextBox").value(dataList[0].Name);
  } else {
    $("#nameTextBox").data("kendoTextBox").value("");
  }
});

// 如果需要手动修改文本框后同步到数据源和后端
$("#nameTextBox").on("change", function() {
  var currentItem = sharedDataSource.data()[0];
  if (currentItem) {
    currentItem.set("Name", $(this).val());
    sharedDataSource.sync(); // 触发后端更新接口
  }
});

绑定Kendo Grid #

直接把Grid的dataSource指定为我们创建的共享数据源，同时开启编辑功能：

<!-- Grid容器 -->
<div id="grid"></div>

$("#grid").kendoGrid({
  dataSource: sharedDataSource,
  editable: "inline", // 行内编辑，也可以用"popup"弹窗编辑
  toolbar: ["create", "save", "cancel"], // 工具栏操作按钮
  columns: [
    { field: "Name", title: "名称", width: "200px" },
    // 其他字段列按需添加
    { command: ["edit", "destroy"], title: "操作", width: "200px" }
  ],
  save: function() {
    console.log("数据已同步到后端");
  },
  remove: function() {
    console.log("数据已删除");
  }
});

这里给个C#控制器的参考，你可以根据自己的后端语言调整：

public class YourController : Controller
{
    // 读取数据接口
    public JsonResult GetData()
    {
        var data = // 从数据库获取数据的逻辑
        return Json(data, JsonRequestBehavior.AllowGet);
    }

    // 新增数据接口
    public JsonResult Create([FromBody] YourDataModel model)
    {
        // 把model插入数据库的逻辑
        return Json(new { success = true });
    }

    // 更新数据接口
    public JsonResult Update([FromBody] YourDataModel model)
    {
        // 更新数据库对应数据的逻辑
        return Json(new { success = true });
    }

    // 删除数据接口
    public JsonResult Delete(int id)
    {
        // 根据id删除数据库数据的逻辑
        return Json(new { success = true });
    }
}

如果想让文本框显示Grid当前选中行的Name字段，可以监听Grid的change事件：

$("#grid").data("kendoGrid").bind("change", function() {
  var selectedRow = this.select();
  if (selectedRow.length > 0) {
    var selectedItem = this.dataItem(selectedRow);
    $("#nameTextBox").data("kendoTextBox").value(selectedItem.Name);
  }
});

这样下来，你的文本框和Grid就共用同一个数据源了，增删改操作都会自动同步到后端控制器。如果还有细节问题，比如数据验证、样式调整，可以再针对性地调整配置~

内容的提问来源于stack exchange，提问作者Naveen