时间戳

首页 > 解决方案 > 更新由远程数据填充的 Kendo 网格列的值

javascript - 更新由远程数据填充的 Kendo 网格列的值

问题描述

我有一个剑道网格，它在页面加载后立即呈现。网格由远程数据填充。

 logMonitoringGrid.kendoGrid({
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: window.$vars['webApiHost'] + "logs",
                            dataType: "json",
                        }
                    },
                    serverFiltering: false,
                    serverPaging: false,
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                TTId: { type: "string" },
                                LUId: { type: "number" },
                                Level: { type: "string" },
                                Server: { type: "string" },
                                Thread: { type: "number" },
                                Message: { type: "string" },
                                Ip: { type: "string" },
                                RId: { type: "string" },
                                Timestamp: { type: "date" }
                            }
                        }
                    }
                },
                columns: columnObjects
            });

var lGrid = logMonitoringGrid.data("kendoGrid");

还有另一个 API 有这样的所有租户的数据（JSON）

{
    Id: 5196
    Name: "unittest"
    ContactEmail: "admin@unittest.com"
    Theme: "default"
    DefaultLocale: "en-US"
    IsInternal: false
}

我需要用相应的租户名称替换网格每一行的租户 ID。网格的远程数据不发送任何租户名称。这就是为什么我要创建所有租户 ID 及其名称的地图。

 var tenantData = new kendo.data.DataSource({
                transport: {
                    read: {
                        beforeSend: function (xhr) {
                            o9Util.setRequestHeaders(xhr);
                        },
                        url: crudUrl("tenants"),
                        dataType: "json"
                    }
                }
            });

            var myMap = new Map();

            tenantData.fetch(function () {
                var data = tenantData.data();
                for (var i = 0; i < data.length; i++) {
                    myMap.set(data[i].Id, data[i].Name);
                }
            })

现在我正在像这样更新网格列

lGrid.dataSource.fetch(function () {
                var data = this.data();
                for (var i = 0; i < data.length; i++) {
                    for (var [key, value] of myMap.entries()) {
                        if (parseInt(data[i].TTId) === key) {
                            data[i].set("TTId", value);
                        }
                    }
                }
            })

这种方法有效，但在页面加载时需要一些时间来更改列的值。此外，页面在一段时间后变得无响应。有没有其他方法可以在页面加载后立即更新网格？

标签： javascriptjquerykendo-uikendo-grid

解决方案

A 建议如下：

  1. 在 Kendo 调用之前调用 API（租户）。请记住在此请求完成时初始化网格，这意味着在DataSource 的requestEnd事件上；

  2. 初始化你的网格；

  3. 在网格中dataSource.schema.parse，您可以设置所需的值。例子：

    logMonitoringGrid.kendoGrid({
    dataSource: {
        schema: {
            parse: function(data) {
                let tenantJsonData = tenantData.data().toJSON();

                data.forEach(item => {
                    let tenantItem = tenantJsonData.find(ti => ti.Id === item.TTId);

                    if (tenantItem) {
                        item.TTTId = tenantItem.Name;
                    }
                });

                return data;
            }
        }
    }
 }

我没有测试它，但它应该可以工作。

推荐阅读