Question

我无法找到使用Kendo ui网格重绘/重置网格的正确功能。

这是我的小提琴：

将列拖到另一个位置。
点击重置（不起作用）。

我添加了一个名为＆＃34; resetgrid＆＃34;的函数。应该重置/重新加载/重绘网格，但它不起作用。我该怎么办？

function resetgrid(){
    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.read();
    grid.refresh();
}

非常感谢

Answer 1

我可能会建议使用网格上的setOptions来重置列。

grid.setOptions({ columns: [ {field: 'name'},{field:'age'},{field:'a'},{field:'b'} ] });

更新了JSFiddle：http://jsfiddle.net/orcy69dv/2/

Answer 2

没有可以重置列顺序的功能。 grid.refresh()函数使用当前数据项呈现所有表行。它不会影响列顺序，只影响表的内容。

要重置列顺序，您可以使用此功能：

function resetColumns(grid){
    for(var i = 0; i < grid.options.columns.length; i++){
        var field = grid.options.columns[i].field;
        for(var j = 0; j < grid.columns.length; j++){
            if(grid.columns[j].field == field){
                grid.reorderColumn(i, grid.columns[j]);
            }
        }
    }
}

这是更新的小提琴：http://jsfiddle.net/orcy69dv/1/

Answer 3

对我来说，我使用的是角度，这是我将其重置为默认值的方式：
首先在网格的“选项”设置中设置事件，以将列写入localStorage：

 vm.Grid1Options = {
            dataSource: vm.Grid1Data,
            autoBind: false,
            columnResize: saveGrid1State,
            columnShow: saveGrid1State,
            columnHide: saveGrid1State,
            columnReorder: saveGrid1State,
            columnLock: saveGrid1State,
            columnUnlock: saveGrid1State,

这就是那个功能：

function saveGrid1State(e) {
        e.preventDefault();
        $timeout(function () {
            localStorage['kendo-grid-options-Grid1'] = kendo.stringify(e.sender.columns);;
        }, 500);
        vm.showResetGrids = true;
    }

您看到的getColumnsGrid1（）方法用于设置默认列或获取localStorage设置：

function getColumnsGrid1() {
        var columns = [];
        // Check to see if the key is in localStorage, if not use these defaults
        if (localStorage['kendo-grid-options-Grid1']) {
            columns = JSON.parse(localStorage['kendo-grid-options-Grid1']);
        } else {
            columns = [
                        { field: "Field1", title: "Field 1", width: "110px" },
                        { field: "Field2", title: "Field 2", width: "50px" }
                      ];
        }
         $('#Grid1').data('kendoGrid').setOptions({ columns: columns });
}

我在此功能中设置了列而不是网格选项中的列，这使我可以有更多的控制权。

请注意，我只是仅仅获取并设置了列及其属性，这是Kendo告诉您在演示中执行此操作的默认方式，它实际上会抓取您的列以及数据不好。

我的重置网格按钮调用此方法：

        // Delete the Local Storage keys
        localStorage.removeItem('kendo-grid-options-Grid1');

        // Reset the grid
        getColumnsGrid1();

所以现在下次设置数据时，首先调用getColumnsGrid1函数，该函数将确定它是否具有localStorage键或使用默认值。

// Get Grid1Data and wire it up.
dataservice.getGrid1Data(myVar).then(function (response) {
            getColumnsGrid1();
            vm.Grid1Data.data(response);                
        });

我的一个问题是，当我更新列时，用户无法看到更改，因为它始终从LocalStorage读取前一个数据。现在，他们单击Reset Grids按钮，它将删除LocalStorage键并将网格恢复为默认值。

重置Kendo UI Grid中的重新排序列

3 个答案: