Question

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

用户在加载按钮上选择一些参数（公司和日期）和cliks。

用户在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到{{}的列1}}，这是错误的。在这种情况下，列Dec/2015显示为空，并且不会显示列Jan/2015。

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

Answer 1

您应该为dataSource使用一个函数 - ＆gt;运输 - ＆gt;阅读 - ＆gt;数据：

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

KendoGrid刷新

2 个答案: