Kendo Grid 如何更新、创建、删除数据源

Posted

技术标签:

【中文标题】Kendo Grid 如何更新、创建、删除数据源【英文标题】:Kendo Grid how to datasource update,create,delete 【发布时间】:2014-05-14 23:59:03 【问题描述】:

由于某些原因,我不能使用 Kendo 网格的 MVC 包装器。所以我正在尝试在 javascript 上构建剑道网格。

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

1-) 网格上的所有操作(销毁、更新、创建)只是由 Kendo 网格的数据源创建操作。例如更新一条记录后,数据源向该 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;

【问题讨论】:

如果您不能使用 MVC 包装器,那么您缺少的东西。您是否已将 Kendo UI 命名空间添加到视图文件夹中的 Web Config?或者在你的视图顶部扔一个@using Kendo.Mvc.UI 【参考方案1】:

首先您可能需要添加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) 

                            
                        ,

【讨论】:

当我添加 contentType: "application/json; charset=utf-8" 时,Action Method 没有捕获任何内容,但发布了一些数据。当我添加 paramaterMap 选项时,没有来自 read 方法的数据。想想我需要用 Kendo Mvc-Wrapper 解决【参考方案2】:

我已针对同一类型的问题发布了answer,您可以检查一下

您可以使用此代码

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”作为参数名称

希望对你有帮助:)

【讨论】:

以上是关于Kendo Grid 如何更新、创建、删除数据源的主要内容,如果未能解决你的问题,请参考以下文章

如何从控制器更新 Kendo UI Grid 数据源?

内联更新后,Kendo Treelist重新加载/刷新

如何更新显示相关数据的Kendo Grid中的特定字段?

更新 ViewModel 时如何防止 Kendo UI Grid 多次重新绑定

Kendo Grid:取消编辑会删除新行

使用 AJAX 绑定时创建/更新后具有 IEnumerable 属性的 Kendo Grid 模型未正确更新