KendoGrid 刷新

Question

我正在使用 KendoGrid 显示从我的服务中获取的一些数据。

用户选择一些参数（公司和日期）并点击加载按钮。

用户在 datePicker 上选择一个月，服务器将返回该日期加上 11 个月的数据。

我只在用户点击加载按钮后显示网格。

加载函数：

function loadGrid(e) {

    var companyIds = [1, 3, 7]; // user select it

    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var rowHeaders = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];

    var _dataSource = function () {

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: URL,
                    dataType: "json",
                    data: {
                        companyIds: companyIds,
                        date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it
                    }
                }
            },
            schema: {
                data: function (data) {

                    // function to handle data returned from server

                    var dataArray = [];
                    var index = 0;
                    for (var key in data[0]) {
                        if (Object.prototype.hasOwnProperty.call(data[0], key)) {
                            var property = key;
                            if (property == "date") {
                                continue;
                            }
                            key = {};
                            key["X"] = rowHeaders[index];
                            index++;
                            for (var i = 0; i < data.length; i++) {
                                var date = data[i].date;
                                var dateSplit = date.split("-");
                                var year = dateSplit[0];
                                var month = months[dateSplit[1] - 1];
                                var header = month + "_" + year;
                                key[header] = data[i][property];
                            }
                            dataArray.push(key);
                        }
                    }
                    return dataArray;
                }
            }
        });
        return dataSource;
    };

    $("#grid").kendoGrid({
        scrollable: false,
        editable: false,
        dataSource: _dataSource()
    });
}

当我第一次点击加载按钮时，数据源被加载，网格正确显示。

但是，例如，如果我更改 datePicker 上的日期并再次单击加载按钮，数据源会加载正确的数据（其他月份的新记录），但不会刷新网格。

如果我第一次选择月份Jan/2015，它会从Jan/2015 加载并显示到Dec/2015，这是正确的。

但是，如果我选择月份 Feb/2015，数据源将从 Feb/2015 加载到 Jan/2016（正确），但网格显示从 Jan/2015 到 Dec/2015 的列，这是错误的。在这种情况下，Jan/2015 列显示为空，Jan/2016 列不显示。

有人能指出我正确的方向吗？ 谢谢！

Answer 1

你应该为你的数据源使用一个函数 -> 传输 -> 读取 -> 数据：

data: function() {
    return {
               companyIds: companyIds,
               date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it
           };
    }

更新：

我会这样做：

function loadGrid(e) {
    $("#grid").data("kendoGrid").dataSource.fetch();
}

function getData() {
    var companyIds = ...
    var picker = ...
    return {
        companyIds: companyIds,
        date: kendo.toString(picker.value(), "yyyy-MM-dd") // user select it
    };
}

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: URL,
            dataType: "json",
            data: getData
        }
    },
    schema: {
        data: function (data) {

            // function to handle data returned from server

            var dataArray = [];
            var index = 0;
            for (var key in data[0]) {
                if (Object.prototype.hasOwnProperty.call(data[0], key)) {
                    var property = key;
                    if (property == "date") {
                        continue;
                    }
                    key = {};
                    key["X"] = rowHeaders[index];
                    index++;
                    for (var i = 0; i < data.length; i++) {
                        var date = data[i].date;
                        var dateSplit = date.split("-");
                        var year = dateSplit[0];
                        var month = months[dateSplit[1] - 1];
                        var header = month + "_" + year;
                        key[header] = data[i][property];
                    }
                    dataArray.push(key);
                }
            }
            return dataArray;
        }
    }
});

$("#grid").kendoGrid({
    scrollable: false,
    editable: false,
    dataSource: dataSource
});

Answer 2

当用户单击load button 时，我最终销毁并重新创建了网格。

$("#loadButton").kendoButton({
    click: loadGrid
});

var loaded = false;
function loadGrid(e) {

    if (value) {

        if (loaded) {
            var grid = $("#grid").data("kendoGrid");
            grid.wrapper.empty();
            grid.destroy();
        }

        $("#grid").kendoGrid({
            scrollable: false,
            editable: false,
            autoBind: false,
            dataSource: _dataSource()
        });

        $("#grid").data("kendoGrid").dataSource.read();
        loaded = true;
    } else {
        e.preventDefault();
        alert("aaaa");
    }
}