Блог

У меня есть функция, которая создает сетку kendo, в которой есть кнопка для загрузки ее в виде файла «.xlsx». Существует выпадающий список, который при изменении снова вызывает эту функцию.

 function CreateGrid(result) {

    var chartSeries = result.ChartData;
    var gName = $("#dropdown1 option:selected").text();
    // Create Grid
    $("#grid1").kendoGrid({
        toolbar: ["excel"],
        excel: {
            fileName: "Grid1_" gName ".xlsx",
            filterable: true,
            allPages: true
        },
        columns: [
            { field: "column1", width: "90px", title: "<strong>Item1</strong>" },
            { field: "column2", width: "80px", title: "<strong>Item2</strong>" },
            { field: "column3", width: "120px", title: "<strong>Item3</strong>", format: "{0:c2}" }

        ],
        groupable: false,
        resizable: true,
        pageable: false,
        scrollable: true,
        filterable: false,
        sortable: true,
        pageSize: 50
    });

    // Set Grid data source
    $("#grid1").data("kendoGrid").setDataSource(
        new kendo.data.DataSource({
            //Set the data of the grid as the result array of object.
            data: result.ChartData
        })
    );
}
  

Проблема в том, что когда я нажимаю на кнопку, чтобы загрузить файл, он загружает все ранее созданные сетки, когда мне нужна только текущая.
Например, я создал сетку один раз, затем я изменил выпадающий список, и сетка изменилась на значения, соответствующие новому значению выпадающего списка, но когда я нажимаю на кнопку, она загружает 2 файла: из первой созданной сетки и из отображаемой.
Если я снова изменю выпадающий список, значения изменятся в соответствии с раскрывающимся значением, но если я нажму, чтобы загрузить файл, он загрузит предыдущие 2 файла тот, что в таблице.

Кажется, что даже если я больше не могу видеть предыдущие сетки, они все еще там, поэтому я хочу знать, как я могу их уничтожить / стереть / очистить.

Я бы посоветовал вам удалить сетку перед созданием новой. Эта функция удалит его, а также вернет вам текущие данные в таблице, если вы захотите их переназначить:

 function removeGrid(g) {
    var tmp = [];
    try {
        tmp = g.data("kendoGrid").dataSource.data();
    } catch (e) { }
    var container = g.parent();
    g.remove();
    container.append("<div id='"   g.attr("id")   "' class='"   g.attr("class")   "'></div>");
    return tmp;
}
  

Тогда вы могли бы назвать это так:

 var gName = $("#dropdown1 option:selected").text();
removeGrid($("#grid1"));
// Create Grid
$("#grid1").kendoGrid({
    ...
}