剑道网格如何数据源更新，创建，删除

Kendo Grid how to datasource update,create,delete

本文关键字：更新 创建 删除 数据源 网格      更新时间：2023-09-26

由于某些原因，我无法使用剑道网格的MVC包装器。所以我正在尝试在JavaScript上构建剑道网格。

尝试在网格上更新或创建记录时存在 2 个主要问题。

1-）网格上的所有操作（销毁，更新，创建）只需通过剑道网格的数据源创建操作即可。例如，在更新记录后，数据源将数据发送到此 URL 的次数（列数）： http://localhost:63186/Administrator/DefinitionDetailCreate .它应将值传递给：

http://localhost:63186/Administrator/DefinitionDetailUpdate

2-）操作（更新或创建）后，网格将所有数据发送到操作方法，而不是新的或更新的数据。所以它向请求发送网格上的列数

JavaScript：

var dataItem = this.dataItem($(e.target).closest("tr"));
var code = dataItem.CODE;
// alert(code);
var crudServiceBaseUrl = "/Administrator/",
  dataSource = new kendo.data.DataSource({
    transport: {
      read: {
        url: '@Url.Action("DefinitionDetailRead", "Administrator")',
        data: {DefinitionCode: code},
        dataType: "json"
      },
      update: {
        url: '@Url.Action("DefinitionDetailUpdate", "Administrator")',
        type: "POST",
        dataType: "text"
      },
      destroy: {
        url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
        type: "POST",
        dataType: "text",
      },
      create: {
        url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
        type: "POST",
        dataType: "text",
      }
    },
    // batch: true,
    pageSize: 9,
    schema: {
      data: "Data",
      model: {
        ID: "ID",
        fields: {
          ID: {editable: false, nullable: true},
          DESCRIPTION: {validation: {required: true}}
        }
      }
    }
  });
$("#detailsGrid").kendoGrid({
  dataSource: dataSource,
  attributes: {style: "padding-left: 0px; font-size: 14px"},
  pageable: {refresh: false, pageSizes: false, buttonCount: 5},
  toolbar: ["create"],
  columns: [
    {field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
    {command: ["edit", "destroy"], title: "Operasyon", width: "100px"}],
  editable: "popup"
});

控制器：

[HttpPost]
public ActionResult DefinitionDetailUpdate(Guid ID,Guid REFERENCEID,string DESCRIPTION)
{
  return null;
}
[HttpPost]
public ActionResult DefinitionDetailCreate(Guid ID, Guid REFERENCEID, string DESCRIPTION)
{
  return null;
}

首先，您可能需要添加 parameterMap，这将有助于识别服务器端方法：

parameterMap: function (options, operation) {
var out = null;
switch (operation) {
    case "create":
        out = '{ "param":' + options.somevalue + '}';
        break;
    case "read":
        out = '{ "id":' + options.somevalue + '}';
        break;
    case "update":
        out = '{ "id":' + options.somevalue + '}';
        break;
    case "destroy":
        out = '{ "id":  ' + options.somevalue + '}';
        break;
}
return out;

}

我还建议将所有数据类型保留为dataType: "json"

此外，您的传输定义中似乎缺少contentType： 

  update: {
                            url: _op.serviceBaseUrl + "Update",
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            complete: function (jqXhr, textStatus) {
                            }
                        },

我已经发布了相同类型问题的答案，你可以检查

一下

或

您可以使用此代码

.js

 var dataItem = this.dataItem($(e.target).closest("tr"));
            var code = dataItem.CODE;
           // alert(code);
            var crudServiceBaseUrl = "/Administrator/",
                         dataSource = new kendo.data.DataSource({
                             transport: {
                                 read: {
                                 url: '@Url.Action("DefinitionDetailRead", "Administrator")',
    type: "POST",
                                     dataType: "json"
                                 },
                                 update: {
                                     url: '@Url.Action("DefinitionDetailUpdate", "Administrator")' ,
                                     type: "POST",
                                     dataType: "json"
                                 },
                                 destroy: {
                                     url: '@Url.Action("DefinitionDetailDelete", "Administrator")',
                                     type: "POST",
                                     dataType: "json",
                                 },
                                 create: {
                                     url: '@Url.Action("DefinitionDetailCreate", "Administrator")',
                                     type: "POST",
                                     dataType: "json",
                                 },
                                  parameterMap: function (options, operation) {
                                  if (operation !== "read" && options.models) {
                                  return { models: kendo.stringify(options.models) };
                                  }
                              } },
                            // batch: true,
                             pageSize: 9,
                             schema: {
                                 data: "Data",
                                 model: {
                                     ID: "ID",
                                     fields: {
                                         ID: { editable: false, nullable: true },
                                         DESCRIPTION: { validation: { required: true } }

                                     }
                                 }
                             }
                         });
            $("#detailsGrid").kendoGrid({
                dataSource: dataSource,
                attributes: { style: "padding-left: 0px; font-size: 14px"},
                pageable: {refresh: false, pageSizes: false, buttonCount: 5},
                toolbar: ["create"],
                columns: [
                    {field: "DESCRIPTION", title: "DESCRIPTION", width: "200px"},
                    { command: ["edit", "destroy"], title: "Operasyon", width: "100px" }],
                editable: "popup"
            });

控制器

 [HttpPost]
    public ActionResult DefinitionDetailUpdate(string models)
    {
   //Deserialize to object
    IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);
     return Json(objName)

    }
    [HttpPost]
     public ActionResult DefinitionDetailCreate(string models)
     {
         //Deserialize to object
    IList<UrObjectType> objName= new JavaScriptSerializer().Deserialize<IList<UrObjectType>>(models);
     return Json(objName)
     }

请注意，parameterMap： function（） 使用名称模型以序列化字符串格式发送更新的数据，因此您应该在操作中使用"models"作为参数名称

我希望这会对您有所帮助：）

相关文章：