重置 Kendo UI 网格中重新排序的列

Question

我找不到合适的函数来使用 Kendo ui 网格重新绘制/重置网格。

这是我的 fiddle:

将一列拖到另一个位置。
点击重置（无效）。

我包含了一个名为 "resetgrid" 的函数，它应该重置/重新加载/重绘网格，但它不起作用。我该怎么做？

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

非常感谢

Answer 1

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

的内容

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

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

此处更新fiddle：http://jsfiddle.net/orcy69dv/1/

Answer 2

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

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

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

Answer 3

对我来说，我使用的是 angular，这是我将其重置为默认值的方式：
首先在网格的选项设置中设置事件以将列写入本地存储：

 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 读取以前的数据。现在他们单击“重置网格”按钮，它将删除 LocalStorage 密钥并将网格恢复为默认值。

重置 Kendo UI 网格中重新排序的列

Reset reordered columns in Kendo UI Grid

javascript

jquery

kendo-ui

kendo-grid