【问题标题】:Telerik Kendo grid for jquery does not show data用于 jquery 的 Telerik Kendo 网格不显示数据
【发布时间】:2020-12-02 12:49:48
【问题描述】:

我的剑道网格定义如下:

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",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "PUT"
    },
    create: {
        url: "/monitoring/matrix/routecontentrules/createroutecontentrule",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "POST"
    },
    destroy: {
        url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        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", defaultValue: 0 },
            SenderMatch: { type: "string", defaultValue: "" },
            ContentMatch: { type: "string", defaultValue: "" },
            SenderReplace: { type: "string", defaultValue: "" },
            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",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        width: 150, field: "SenderReplace", title: "Sender replace",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        width: 150, field: "ContentReplace", title: "Content replace",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        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();});

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

    [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});
}

读取请求时的数据如下:

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

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

问题是网格没有显示这些数据。如果我单击网格单元格,我可以看到数据在这里。在这种情况下,单元格变为可编辑并显示数据的当前值。但是一旦我将编辑移动到一些新的单元格,以前的隐藏数据。我正在检查单元格,我发现当单元格不编辑时,它的描述如下:

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

当单元格处于编辑模式时,它在 html 中描述如下:

<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">
    <input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">
</td>

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

【问题讨论】:

    标签: c# jquery kendo-ui telerik kendo-grid


    【解决方案1】:

    你为什么要在你的类中添加[Route] 属性......?他们应该在ControllerAction上。

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

    您认为应该获取数据时,可以粘贴network的图片给我们看,然后我们可以检查是什么问题。

    【讨论】:

    • 我从 chrome 开发工具上传了图片。关于 Route 属性。这是服务堆栈的约定。正如我在问题中所说,我在后端使用 Service Stack,而不是经典的 MVC。
    【解决方案2】:

    我知道问题出在哪里了。

    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",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        width: 150, field: "SenderReplace", title: "Sender replace",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        width: 150, field: "ContentReplace", title: "Content replace",
        template: "<span><label class='SenderMatch'</label></span>",
        headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
    },
    {
        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"
    }],
    

    模板有问题。我删除了它们,现在显示了数据。命令模板仍然有效。

    【讨论】:

    • 您在模板的标签中缺少大于号字符:...class='SenderMatch'&gt;&lt;...
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多