jQuery的Telerik Kendo网格不显示数据

问题描述

我的剑道网格定义如下:

for item in string:
    if item == "(":
        matchingbraceindex = string.find(")",item)

    elif item == ")":
        matchingbraceindex = string.rfind("(",item)

对于后端,我正在使用ServiceStack,请求的定义如下:

var dataSource = new kendo.data.DataSource({
batch: false,autoSync: true,transport: {
    read: {
        url: "/monitoring/matrix/routecontentrules?format=json",contentType: "application/json; charset=utf-8",dataType: "json",type: "POST",timeout: 30000
    },update: {
        url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",type: "PUT"
    },create: {
        url: "/monitoring/matrix/routecontentrules/createroutecontentrule",type: "POST"
    },destroy: {
        url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",type: "DELETE"
    },parameterMap: function (data,operation) {
        if (operation == "read") {
            return kendo.stringify({
                RouteId: routeDataItem.RouteId
            });
        }
        else if (operation == "destroy") {
            return kendo.stringify({
                Id: data.Id,});
        }
        else {
            return kendo.stringify({
                Id: data.Id,RouteId: routeDataItem.RouteId,OrderId: data.OrderId,SenderMatch: data.SenderMatch,ContentMatch: data.ContentMatch,SenderReplace: data.SenderReplace,ContentReplace: data.ContentReplace,});
        }
    }
},schema: {
    model: {
        id: "Id",fields: {
            Id: { type: "number",defaultValue: 0 },OrderId: { type: "number",SenderMatch: { type: "string",defaultValue: "" },ContentMatch: { type: "string",SenderReplace: { type: "string",ContentReplace: { type: "string",defaultValue: "" }
        }
    }
}});$("#Grid").kendoGrid({
dataSource: dataSource,reorderable: false,resizable: false,sortable: false,groupable: false,scrollable: true,navigatable: true,editable: true,columns: [
    {
        width: 150,field: "SenderMatch",title: "Sender match",template: "<span><label class='SenderMatch'</label></span>",headerAttributes: { title: "Sender match",style: "text-align: right" },attributes: { style: "text-align: right" }
    },{
        width: 150,field: "ContentMatch",title: "Content match",headerAttributes: { title: "Content match",field: "SenderReplace",title: "Sender replace",headerAttributes: { title: "Sender replace",field: "ContentReplace",title: "Content replace",headerAttributes: { title: "Content replace",{
        command: [
            { name: "destroy",template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
        ],width: "50px"
    }
],toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>')});$(".ReloadManipulationByCustomer").click(function () {
$("#Grid").data("kendoGrid").dataSource.read();});

用于检索数据的代码如下:

    [Route("/monitoring/matrix/routecontentrules/createroutecontentrule","POST")]
[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule","PUT")]
public sealed class CreateUpdateRouteContentRuleRequest
{
    public int Id { get; set; }
 
    public int OrderId { get; set; }
 
    public int RouteId { get; set; }
 
    public string SenderMatch { get; set; }
 
    public string ContentMatch { get; set; }
 
    public string SenderReplace { get; set; }
 
    public string ContentReplace { get; set; }
}
 
[Route("/monitoring/matrix/routecontentrules")]
public sealed class RouteContentRulesRequest
{
    public int RouteId { get; set; }
}
 
[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]
public sealed class DeleteRouteContentRuleRequest
{
    public int Id { get; set; }
}
 
public sealed class RouteContentRuleModel
{
    public int Id { get; set; }
 
    public int OrderId { get; set; }
 
    public int RouteId { get; set; }
 
    public string SenderMatch { get; set; }
 
    public string ContentMatch { get; set; }
 
    public string SenderReplace { get; set; }
 
    public string ContentReplace { get; set; }
}

读取请求期间的数据如下:

    public object Post(RouteContentRulesRequest request)
{
    return _dbConnectionFactory
        .OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));
}

public object Any(CreateUpdateRouteContentRuleRequest request)
{
    RouteContentRule entity;

    if (!Db.Exists<Route>(new { Id = request.RouteId }))
    {
        throw new HttpError(HttpStatusCode.BadRequest,$"Route with id {request.RouteId} does not exist");
    }
    if (request.Id != 0)
    {
        var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));
        entity = request.ToEntity(routeContentRule);
        Db.Update(entity,r => r.Id == routeContentRule.Id);
        return entity.ToModel();
    }

    entity = request.ToEntity();
    entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule,int?>(x => sql.Max(x.OrderId),x => x.RouteId == request.RouteId)) ?? 0) + 1;
    var id = (int)Db.Insert(entity,true);
    entity.Id = id;

    return entity.ToModel();
}

public void Delete(DeleteRouteContentRuleRequest request)
{
    Db.Delete<RouteContentRule>(new {Id = request.Id});
}

以下是来自Chrome开发者工具的图像:

server request

preview

response

问题是网格未显示这些数据。如果单击网格单元,我可以看到数据在这里在这种情况下,该单元格变为可编辑状态,并显示数据的当前值。但是,一旦我将编辑移至某些新单元格之前,就会隐藏数据。我正在检查单元格,发现单元格未编辑时,描述如下:

    [
   {
      "Id":35,"OrderId":1,"RouteId":72303,"SenderMatch":"335","ContentMatch":"","SenderReplace":"","ContentReplace":""
   },{
      "Id":36,"OrderId":2,"SenderMatch":"55","ContentReplace":""
   }
]

当单元格处于edding模式时,其在html中的描述如下:

    <td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">
    <span><label class="SenderMatch" <="" label=""></label></span>
</td>

我不知道为什么没有显示数据。据我所知,它应该显示数据,但不显示此数据。

解决方法

为什么将[Route]属性放在课程中....?它们应该位于Controller的{​​{1}}上。

然后,您可以打开Chrome的开发工具,然后查看Action标签,以检查数据是否正在发送到后端。

您可以粘贴network的图片,以便在您认为应该获取数据时向我们展示,然后我们可以检查出什么问题。

,

我找出了问题所在。

columns: [
{
    width: 150,field: "SenderMatch",title: "Sender match",template: "<span><label class='SenderMatch'</label></span>",headerAttributes: { title: "Sender match",style: "text-align: right" },attributes: { style: "text-align: right" }
},{
    width: 150,field: "ContentMatch",title: "Content match",headerAttributes: { title: "Content match",field: "SenderReplace",title: "Sender replace",headerAttributes: { title: "Sender replace",field: "ContentReplace",title: "Content replace",headerAttributes: { title: "Content replace",{
    command: [
        { name: "destroy",template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
    ],width: "50px"
}],

模板是错误的。我删除了它们,现在显示了数据。命令模板仍然有效。