好久没看，再来看看，脑细胞死了不少，呃呃呃呃。。。。

jqgrid 本身的列的colNames就有hidden属性，此业务是在显示的列上，客户进行操作，显示和排序自己要的。

过滤设置hidden属性的。

    getAllShowNames: function(){
        var self = this;
        var temp = [];
        // var colModelIndexArr={};
        for(var i = 0; i < self.colNames.length; i++) {
            if(self.colModel[i].hidden) continue;
            var tk = self.colModel[i].name,
                colName = self.colNames[i];
            temp.push({"name": colName,"key": tk});
            // colModelIndexArr[i]=tk;
        }
        self.showNames = temp;
        // self.colModelIndexArr = colModelIndexArr;
    },

layui弹出模态框，初始化HTML

 

    getAllCheckboxItems: function(){
        var self = this;
        var sortItems = "<div style='padding-top: 20px;' class='grid-config-layer " + self.gridId + "-config-layer'>";
        $(self.showNames).each(function(i, e){
            
            if (self.selectColSortKeys.includes(e.key)) {
                var tmp = self.selectColSortKeys.indexOf(e.key)+1;
                sortItems += "<div class='col-sm-3'><input type='checkbox' " + " class='jt-gc-check  jt-gc-item jt-gc-sortCol" + "' value='" + e.key + "' checked>" + e.name;
                sortItems +=  "<span class='order' style='color:red;'>("
                sortItems += tmp+ ")</span>"
            } else {
                sortItems += "<div class='col-sm-3'><input type='checkbox' " + " class='jt-gc-check  jt-gc-item jt-gc-sortCol" + "' value='" + e.key + "' " + ">" + e.name;
            }
            sortItems += "</div>";
        })
        sortItems += "</div>";
        return sortItems;
    },

绑定每个checkbox事件，保存每次操作的结果：

 

        $(document).on('click', '.jt-gc-sortCol', function(e){
            console.log(".jt-gc-sortCol")
            if($(this).is(":checked")) {
                var sotrKey = $(this).val();
                var order = self.selectColSortKeys.length;
                self.selectColSortKeys[order]=sotrKey;
                order += 1;
                $(this).closest('.col-sm-3').append("<span class='order' style='color:red;'>("+order+")</span>");
            }else{
                var order = $(this).closest('.col-sm-3').find('.order').text()
                order = parseInt(order.replace(")", "").replace("(", ""));
                $(this).next().remove();
                var orderKey = Object.keys(self.selectColSortKeys);
                var orderLength = orderKey.length;
                var changeKey = orderKey.splice(order-1, orderKey.length-1);
                $(changeKey).each(function(k,v){
                    v = parseInt(v);
                    var sortKey = v + 1
                    self.selectColSortKeys[v]=self.selectColSortKeys[sortKey];
                    var classN = "input[value="+self.selectColSortKeys[sortKey]+"]";
                    var inputTag = $('.' + self.gridId + '-config-layer').find(classN);
                    inputTag.next().text("(" + sortKey +")");
                })
                delete self.selectColSortKeys[orderLength-1];
                self.selectColSortKeys.length = orderLength - 1;
            }
        });
    },

这里用到对象的一些属性，

选中：只要在后面增加就好，页面的checkbox也增加序号

取消选中： 获取被删除的是哪个checkbox的序号，在总的选中中，获取每个选中的下标，用splice获取被删除的下标之后的所有下标，这后面的下标的序号要减一，遍历下标，有两个操作

（1）修改页面的checkbox的序号，

（2）总的保存序号的对象的元素要从被删除的序号开始往前移动一个。

最后要删除总的保存序号的对象的最后一个元素，而且对象的length属性不会自动减一，要手动修改。

 最后是保存localstorage和服务器。

点击确认，表格刷新，重置列。

 saveSysSortColNameConfig: function() {
        var self = this;
        var url = ListUtil._CONS_.SAVE_GRID_CONFIGER;
        var param = {
            key: (self.gridId + ".grid." + self.key),
            content: JSON.stringify(self.selectColSortKeys)
        };
        if(self.configId) {
            url = ListUtil._CONS_.SAVE_GRID_CONFIGER;
            param.id = self.configId;
        }
        FormUtils.submit(url, param, function(msg){
            if(msg.success){
                window.localStorage.removeItem(self.gridId + '.grid.' + self.key);
                self.setSortCol();
                if(!self.configId) self.configId = msg.msgCode;
                DialogUtils.success("提示", "配置已保存！");
            }
        });
    },
    setSortCol: function() {
        var self = this;
        var colModelIndex = self.colModelIndex;
        var allIndex = Object.values(colModelIndex);
        var allIndexAdd2 = [];
        $(allIndex).each(function(k, v){
            allIndexAdd2.push(v+2);
        })
        var selectAllIdx = [];
        $(self.selectColSortKeys).each(function(idx, key){
            var allIdx = colModelIndex[key];
            selectAllIdx.push(allIdx+2);
            allIndexAdd2.splice(allIdx, 1);
        })
        var showColList = [], hideColList = [];

        $(self.showNames).each(function(k, v){
            var key = v.key;
            if(self.selectColSortKeys.includes(key)) {
                showColList.push(key);
            } else {
                hideColList.push(key);
            }
        })
        self.grid.setGridParam().showCol(showColList);
        self.grid.setGridParam().showCol(hideColList);
        var permAll = selectAllIdx.concat(allIndexAdd2);
        permAll.unshift(0, 1);
        self.grid.remapColumns(permAll, true);
        // self.grid.trigger("reloadGrid");
    },

不过这个重置表格有问题，导致表格错位。

 

 

 到现在都不知道怎么回事，额鹅鹅鹅

<!DOCTYPE html>

<html lang="en">
<head>
  <!-- The jQuery library is a prerequisite for all jqSuite products -->
  <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
  <!-- We support more than 40 localizations -->
  <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
  <!-- This is the Javascript file of jqGrid -->
  <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
  <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css"/>
  <script>
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <meta charset="utf-8"/>
  <title>jqGrid Loading Data - Edit Dialogs with Custom Layout</title>
</head>
<body>
<div style="margin-left:20px">
  <table id="jqGrid"></table>
  <div id="jqGridPager"></div>
    <button class="button">排序表头</button>
</div>
<script type="text/javascript">

  $(document).on('click', '.button', function (){
    var perm = [
      0,
      1,
      3, // CompanyName
      2, // CustomerID
      5, // PostalCode
      4, // Phone
      6, // City
    ]
    $("#jqGrid").remapColumns(perm, true)
  })
  $(document).ready(function () {
    $("#jqGrid").jqGrid({
      url: 'data.json',
      editurl: 'clientArray',
      datatype: "json",
      rownumbers: true,
      multiselect: true,
      colNames: ["Customer ID", "Company Name", "Phone", "Postal Code", "City"],
      colModel: [
        {
          label: 'CustomerID',
          name: 'CustomerID',
          width: 75
        },
        {
          label: 'Company Name',
          name: 'CompanyName',
          width: 140,
          editable: true, // must set editable to true if you want to make the field editable
          // set options related to the layout of the Edit and Add Forms
          hidden: true,
          formoptions: {
            colpos: 1, // the position of the column
            rowpos: 1, // the position of the row
            label: "Company Name: " // the label to show for each input control
            //elmsuffix: " * " // the suffix to show after that
          }
        },
        {
          label: 'Phone',
          name: 'Phone',
          width: 100,
          editable: true,
          formoptions: {
            colpos: 1,
            rowpos: 2
          }
        },
        {
          label: 'Postal Code',
          name: 'PostalCode',
          width: 80,
          editable: true,
          formoptions: {
            colpos: 2,
            rowpos: 1,
            label: "Postal Code"
          }
        },
        {
          label: 'City',
          name: 'City',
          width: 140,
          editable: true,
          formoptions: {
            colpos: 2,
            rowpos: 2
          }
        }
      ],
      loadOnce: true,
      viewrecords: true,
      width: 780,
      height: 200,
      rowNum: 10,
      pager: "#jqGridPager"
    });

    $('#jqGrid').navGrid('#jqGridPager',
      // the buttons to appear on the toolbar of the grid
      {
        edit: true,
        add: true,
        del: true,
        search: false,
        refresh: false,
        view: false,
        position: "left",
        cloneToTop: false
      },
      // options for the Edit Dialog
      {
        height: 'auto',
        width: 620,
        editCaption: "The Edit Dialog",
        recreateForm: true,
        closeAfterEdit: true,
        errorTextFormat: function (data) {
          return 'Error: ' + data.responseText
        }
      },
      // options for the Add Dialog
      {
        height: 'auto',
        width: 620,
        closeAfterAdd: true,
        recreateForm: true,
        errorTextFormat: function (data) {
          return 'Error: ' + data.responseText
        }
      },
      // options for the Delete Dailog
      {
        errorTextFormat: function (data) {
          return 'Error: ' + data.responseText
        }
      });
  });

</script>

<!-- This code is related to code tabs -->
<br/>
<span
  style="margin-left:18px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
<br/><br/>
<div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
<script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
<link rel="stylesheet" href="../../../css/prettify.css"/>
<script type="text/ecmascript" src="../../../js/codetabs-b.js"></script>

<script type="text/javascript">

  var tabData =
    [
      {name: "HTML", url: "index.html", lang: "lang-html"},
      {name: "Data", url: "data.json", lang: "lang-json"},
      {name: "Description", url: "description.html", lang: "lang-html"}
    ];

  codeTabs(tabData);

</script>
<!-- End of code related to code tabs -->
</body>
</html>

这是 Guriddo_jqGrid_JS_5_3_X_demo  的里的代码，点击第一次是可以排序的，有没有大神做过这种业务的，刚转前端1年，就叫我做这个，，，，，，