Javascript 重置剑道UI网格中重新排序的列

我找不到使用剑道ui网格重画/重置网格的适当函数

这是我的小提琴：

将列拖动到另一个位置

单击重置（不工作）

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

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

---

非常感谢

没有重置列顺序的功能。

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

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

函数重置列（网格）{
对于（var i=0；i

---

这里更新了fiddle:

没有任何函数可以重置列顺序。

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

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

函数重置列（网格）{
对于（var i=0；i

---

这里更新了fiddle:

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

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

---

更新的JSFIDLE:

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

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

---

更新的JSFIDLE:

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

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

下面是这个函数：

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

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

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

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

对于我来说，我使用的是angular，这就是我将其重置为默认值的方式：

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

首先在网格的选项设置中设置事件，以将列写入本地存储：

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

下面是这个函数：

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

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

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

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

太好了！非常感谢你！非常感谢你

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