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 如何更新、创建、删除数据源的主要内容,如果未能解决你的问题,请参考以下文章