剑道 UI 新增记录
Posted
技术标签:
【中文标题】剑道 UI 新增记录【英文标题】：Kendo UI add new record 【发布时间】：2015-06-20 12:26:13 【问题描述】：我已经使用 Web API 2.2 创建了一个 odata v4 服务，我已经成功地将服务记录绑定到网格，但我无法添加记录。请注意，我为 odata v4 服务创建了一个单独的项目，而 Kendo UI Grid 在其他项目中。下面是网格的代码。
<script>
$(document).ready(function ()
$("#searchResults").kendoGrid(
dataSource:
type: "odata-v4",
transport:
read:
"http://test.odata.northwind/odata/Customers",
create:
url: "http://test.odata.northwind/odata/Customers",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
type: "post"
,
parameterMap: function (data, type)
if (type == "create")
// send the created data items as the "models" service parameter encoded in JSON
return models: kendo.stringify(data.models);
,
pageSize: 20,
schema:
data: "value",
model:
id: "CustomerID",/*
total: function (data) return data['@@odata.count']; */
fields:
CustomerID: type: "string",
CompanyName: type: "string",
ContactName: type: "string",
ContactTitle: type: "string",
Country: type: "string"
,
columns: [
field: "CustomerID",
title: "CustomerID",
filterable:
cell:
showOperators: false
,
field: "ContactName",
title: "Contact Name",
filterable:
cell:
operator: "contains"
,
editor: NameAutoComplete
,
field: "ContactTitle",
title: "Contact Title",
filterable:
cell:
operator: "contains"
,
editor: ContactTitleComboBox
,
field: "CompanyName",
title: "Company Name",
filterable:
cell:
operator: "contains"
,
field: "Country",
title: "Country",
filterable:
cell:
operator: "contains"
, editor: categoryDropDownEditor
,
command: ["edit", "destroy"], title: " ", width: "250px"
],
height: 550,
toolbar: ["create", "excel", "pdf"],
excel:
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
filterable: true
, pdf:
allPages: true,
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
,
scrollable: false,
pageable: true,
sortable: true,
groupable: true,
filterable:
mode: "row"
,
editable:
mode: "inline",
create: true,
update: true,
destroy: true
);
);
function categoryDropDownEditor(container, options)
$('<input required data-text-field="Country" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.width(100)
.kendoDropDownList(
autoBind: false,
dataSource:
type: "odata-v4",
transport:
read: "http://test.odata.northwind/odata/Customers"
);
function NameAutoComplete(container, options)
$('<input data-text-field="ContactName" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete(
autoBind: false,
dataSource:
type: "odata-v4",
transport:
read: "http://test.odata.northwind/odata/Customers"
);
function ContactTitleComboBox(container, options)
$('<input data-text-field="ContactTitle" data-value-field="CustomerID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox(
autoBind: false,
dataSource:
type: "odata-v4",
transport:
read: "http://test.odata.northwind/odata/Customers"
);
</script>
如下图，当我按下更新按钮时，没有任何反应，好像按钮甚至没有触发
下面是我绑定到网格的一些 JSON 结果
这是我尝试在 webapi 中获取记录并将记录添加到网格的方式。
public class CustomersController : ODataController
readonly Model1 _db = new Model1();
[EnableQuery(PageSize = 20)]
public IHttpActionResult Get()
return Ok(_db.Customers.AsQueryable());
public IHttpActionResult Get([FromODataUri] string key)
return Ok(_db.Customers.SingleOrDefault(t => t.CustomerID == key));
[System.Web.Mvc.HttpPost]
public async Task<IHttpActionResult> Post(Customers customer)
if (!ModelState.IsValid)
return BadRequest(ModelState);
_db.Customers.Add(customer);
await _db.SaveChangesAsync();
return Created(customer);
[System.Web.Mvc.HttpDelete]
public async Task<IHttpActionResult> Delete([FromODataUri] int key)
var customers = await _db.Customers.FindAsync(key);
if (customers == null)
return NotFound();
_db.Customers.Remove(customers);
await _db.SaveChangesAsync();
return StatusCode(HttpStatusCode.NoContent);
protected override void Dispose(bool disposing)
_db.Dispose();
base.Dispose(disposing);
我整天都在摸不着头脑，好像我错过了什么，任何帮助将不胜感激
更新
【问题讨论】：
能否在更新数据时检查浏览器是否有错误。你可以使用开发者工具是 chrome。 那里似乎没有错误，我已经检查过了。当我在插入记录时按下更新按钮时没有任何反应 据我所知，在传输中应该有“更新”属性，其 url 就像“读取”一样，应该有“放置”（通常我们添加此方法进行更新）.... 【参考方案1】：您似乎没有将网格配置为允许编辑。虽然您添加了创建按钮，但您需要更改可编辑字段以允许编辑，如下所示：
editable:
mode: "inline",
create: true,
update: true,
destroy: true
希望这会有所帮助..
【讨论】：
我试过了，更新按钮没有触发，浏览器控制台也没有任何异常 我还可以看到您在模式中缺少模型字段，您应该将所有 id 和字段放在模型中而不是外部。类似这样的架构： model: id: ..., fields: 我认为现在按钮触发了一些动作，现在当我按下按钮时，我看到上面附加的最后一张图片中显示了这个错误。我已经更新了上面的网格脚本，你指定的更改在里面。 我认为我试图添加的网格的值没有被传递给 odata 服务？？？ 如果没有关于错误的详细信息，我真的不能说什么是错的，但有一件事似乎很明显是使用了 format 参数，据说它会导致错误，因为它没有在WebApi OData，因此尝试将参数映射的代码更改为以下内容： parameterMap: function (options, type) var paramMap = kendo.data.transports.odata.parameterMap(options);删除 paramMap.$inlinecount; //以上是关于剑道 UI 新增记录的主要内容，如果未能解决你的问题，请参考以下文章
easy ui 可编辑表格，新增行某个字段可以修改，已经存在的数据不允许修改