JQGrid：将列重置为原始顺序和状态

Question

我正在使用带有选项 sortable:true 的 jqGrid，并且还使用了 columnChooser 插件。我想创建一个重置按钮

将列重新排序为原始状态
添加回可能已被 columnChooser 插件隐藏的所有列。我可以使用 here

但是，如何完成将列重新排序到原始状态的第一点。

Answer 1

恢复所有列的hidden状态非常简单，您已经找到了相应的代码示例。因此我回答了如何重置列顺序。

问题是可用于对列重新排序的方法 remapColumns 使用列号而不是列名。同样的问题存在于jqGrid的许多其他方法或内部参数中。要使用 remapColumns 方法，您需要使用基于当前索引顺序的列索引。在用户多次更改列的顺序后，很难提供您想要 相对于当前列顺序 的列号。 保存列的名称而不是列索引会容易得多。

我开发 free jqGrid as a fork of jqGrid after Tony had changed the licence agreement of jqGrid and renamed it to Guriddo jqGrid JS. I implemented many changes in jqGrid which disturbs my and have implemented many new features. One from the changes was moving all internal options to holding names instead of indexes as far it was possible without breaking the compatibility to the previous versions. I added the method remapColumnsByName, which simplifies the usage of column remapping (see with the demo)。

在免费的 jqGrid 中实现您的需求可能非常简单。您只需要将原始列顺序保存在一个数组中，然后将其用作 remapColumnsByName 的参数来重置列

$("#grid1").jqGrid({
    ...
    onInitGrid: function () {
        var p = $(this).jqGrid("getGridParam");
        // save names of columns in custom option of jqGrid
        p.originalColumnOrder = $.map(p.colModel, function (cm) {
            return cm.name;
        });
        //alert(JSON.stringify(p.originalColumnOrder));
    }
}).jqGrid("navGrid", { add: false, edit: false, del: false })
.jqGrid("navButtonAdd", {
    buttonicon: "fa-repeat",
    caption: "",
    title: "Reset original column order",
    onClickButton: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        $self.jqGrid("remapColumnsByName", p.originalColumnOrder, true);
    }});

观看演示 https://jsfiddle.net/OlegKi/r6b2os5b/2/

如果由于某些原因您不能迁移到免费的 jqGrid，那么您必须模拟相同的行为。您应该将原始列顺序 保存为列名数组 ，然后在调用 remapColumns 之前将名称直接转换为索引。它也应该有效。

Answer 2

我能够根据我在讨论中读到的一些答案用我们的网格创建一个 "reset columns" 函数（我很乐意给予信任，但这是许多不同解决方案的拼凑而成不同的问题，我没有跟踪所有问题）。

它将恢复可见性、列顺序和冻结状态。如果通过新的列菜单功能修改了列状态，也适用。

（dgColModel是一个全局变量，包含我原来的colModel）

function resetColumns(grid) {
  //remapArray: 0 is the rownumber, 1 is the selection checkbox
  var i = 0, cmi, l = dgColModel.length, remapArray = [0, 1]; 
  for (; i < l; i++){
    cmi = dgColModel[i];
    if (typeof cmi.hidden === 'undefined' || cmi.hidden === false){
      grid.jqGrid('showCol', cmi.name);
    } else {
      grid.jqGrid('hideCol', cmi.name);
    }
    if (typeof cmi.frozen === 'undefined' || cmi.frozen === false){
      grid.jqGrid('setColProp', cmi.name, { frozen: false });
    } else {
      grid.jqGrid('setColProp', cmi.name, { frozen: true });
    }
    remapArray.push(getColumnIndexByName(grid, cmi.name));
  }
  grid.jqGrid("destroyFrozenColumns");
  grid.remapColumns(remapArray, true);
  grid.jqGrid("setFrozenColumns");
}

function getColumnIndexByName(grid, columnName)
{
  var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
  for (; i<l; i++) {
    if (cm[i].name===columnName) {
        return i; // return the index
    }
  }
  return -1;
};

希望这可以成为在线某处的实际网格函数（colModel 可以在实例化网格时保持不变）但同时它工作得很好。

希望对您有所帮助！

Answer 3

将列重新排序为原始状态

我刚遇到这个问题，我已经用一个简单的 javascript 函数实现了这个功能。

首先获取网格初始化时的列顺序：

var initialcolumnorder = $("#Grid").getGridParam('colNames');

在需要时使用 initialcolumnorder 作为参数调用以下函数

function resetColumnOrder(initialcolumnorder)
{  
     var currentColumnOrder = $("#Grid").getGridParam('colNames');
     var columnMappingArray = [];
     $.each(initialcolumnorder, function (index, value) {
         var currentIndex = $.inArray(value, currentColumnOrder);
         columnMappingArray.push(currentIndex);   
     });

     $("#Grid").remapColumns(columnMappingArray, true, false);
}

JQGrid：将列重置为原始顺序和状态

JQGrid: Resetting the Columns to original Order and state

jquery

jqgrid