Question

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

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

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

Answer 1

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

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

在Tony更改了jqGrid的许可协议并将其重命名为free jqGrid之后，我将Guriddo jqGrid JS开发为jqGrid的分支。我在jqGrid中实现了许多变化，这些变化扰乱了我并实现了许多新功能。改变中的一个是将所有内部选项移动到保持名称而不是索引，尽可能在不破坏与先前版本的兼容性的情况下。我添加了方法remapColumnsByName，这简化了列重新映射的使用（请参阅the answer和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

将列重新排序为原始状态

我刚刚遇到过这个问题，我已经用一个简单的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);
}

Answer 3

我能够创建一个＆＃34;重置列＆＃34;基于我在讨论中读到的一些答案，我们的网格功能正在运行（我很乐意给予赞扬，但这是针对不同问题的许多不同解决方案的拼凑而我并没有全部跟踪它们）。

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

（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可以保持不变），但同时它的效果非常好。

我希望这有帮助！

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

3 个答案: