如何隱藏/顯示樞軸網格上的列？

Question

下面的代碼生成與兩個按鈕工具欄

var data = [{ 
     "id": 1, 
     "make": "toyota", 
     "model": "corolla", 
     "fuelusagecity": "17", 
     "fuelusagehwy": "12", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 120000.0000, 
     "highsalestext": null, 
     "salesdate": "2010-12-01" 
    }, { 
     "id": 2, 
     "make": "toyota", 
     "model": "corolla", 
     "fuelusagecity": "10", 
     "fuelusagehwy": "14", 
     "salesaboveavg": false, 
     "fuelmeasure":'Litre', 
     "totalnumberofsales": 100000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2010-12-15" 
    }, { 
     "id": 3, 
     "make": "toyota", 
     "model": "belta", 
     "fuelusagecity": "15", 
     "fuelusagehwy": "10", 
     "salesaboveavg": true, 
     "fuelmeasure":'Litre', 
     "totalnumberofsales": 200000.0000, 
     "highsalestext": null, 
     "salesdate": "2011-01-10" 
    }, { 
     "id": 4, 
     "make": "toyota", 
     "model": "camry", 
     "fuelusagecity": "13", 
     "fuelusagehwy": "10", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 300000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2011-04-23" 
    }, { 
     "id": 5, 
     "make": "nissan", 
     "model": "skyline", 
     "fuelusagecity": "14", 
     "fuelusagehwy": "9", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": true, 
     "totalnumberofsales": 500000.0000, 
     "highsalestext": "HIGH", 
     "salesdate": "2010-09-10" 
    }, { 
     "id": 6, 
     "make": "nissan", 
     "model": "zx300", 
     "fuelusagecity": "10", 
     "fuelusagehwy": "8", 
     "fuelmeasure":'Litre', 
     "salesaboveavg": false, 
     "totalnumberofsales": 400000.0000, 
     "highsalestext": null, 
     "salesdate": "2012-01-06" 
    }]; 

    /* convert the salesdate in */ 
    var i, item, dateParts; 
    for (i = 0; i < data.length; i++) { 
     item = data[i]; 
     if (typeof item.salesdate === "string") { 
      dateParts = item.salesdate.split("-"); 
      item.salesYear = dateParts[0]; 
      item.salesMonth = dateParts[1]; 
      item.salesDay = dateParts[2]; 
      item.salesDateFormatted = dateParts[0]; 
     } 
    } 

    var myIntTemplate = { 
     formatter: "currency", 
     align: "right", sorttype: "number", 
     searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }, 
     formatoptions: { defaultValue: ""}}; 

    $("#list483").jqGrid("jqPivot", 
      data, 
      { 
       frozenStaticCols: true, 
       skipSortByX: true, 
       useColSpanStyle: true, 
       //defaultFormatting: false, 
       xDimension: [ 
        { dataName: "make", width: 100, label: "Make" }, 
        { dataName: "model", width: 100, label: "Model", align: "center", skipGrouping:true }, 
        { dataName: "fuelmeasure", width: 103, label: "Units" }, 
        ], 
       yDimension: [ 
        { dataName: "salesdate", sortorder: "desc"}//, 
        //{ dataName: "salesYear", sorttype: "integer" }, 
        //{ dataName: "salesMonth", sorttype: "integer" } 
       ], 
       aggregates: [{ 
        member: "totalnumberofsales", 
        template: myIntTemplate, 
        formatter:function(cellvalue, options, rowObject){ 
         if(cellvalue=== undefined){ 
          return ''; 
         } 
         else{ 

          var x = options.rowData.pivotInfos[options.colModel.name].rows[0].highsalestext; 

          if(x==="HIGH") 
          { 
           return x; 
          } 
          else 
          { 
           return cellvalue; 
          } 
         } 
        }, 
        cellattr: function (rowId, cellValue, rawObject, cm, rdata) { 
         if (rawObject != null) { 
          var items = rawObject.pivotInfos[cm.name]; 
          if (items != null && items.rows != null && items.rows.length > 0) { 
           var isHigh = true, i; 
           for (i = 0; i < items.rows.length; i++) { 
            if (items.rows[i].highsalestext !== "HIGH") { 
             isHigh = false; 
             break; 
            } 
           } 
           if (isHigh) { 
            return "class='high-marker'"; 
           } 
          } 
         } 
        }, 
        aggregator: "max" 
       }/*, 
       { 
       member: "totalnumberofsales", 
       aggregator: "count", 
       //template: "integer", 
       label: "{0}" 
       }*/] 
      }, 
      // grid options 
      { 
       iconSet: "fontAwesome", 
       cmTemplate: { autoResizable: true, width: 75 }, 
       shrinkToFit: false, 
       useUnformattedDataForCellAttr: false, 
       autoResizing: { compact: true }, 
       groupingView: { 
        groupField: ["x0"], 
        groupColumnShow: [false], 
        groupText: ["<span class='group-text'>{0}</span>"] 
       }, 
       //width: 450, 
       toolbar: [true, "top"], 
       pager: true, 
       rowNum: 20, 
       caption: "<b>Car sales statistics</b>", 
       rowList: [5, 10, 20, 100, "10000:All"] 
      } 
    );  

    $('<div className="clsRangeDiv"><input type="button" id="btnHide" value="Hide" /><input type="button" id="btnShow" value="Show" /></div>').appendTo("#t_list483"); 

    $('#btnHide').click(function(){ 
      var datestoHide = ['2011-04-23','2010-12-15']; 
     jQuery("#list483").jqGrid('hideCol',datestoHide); 
    }) 

    $('btnShow').click(function(){ 
     var datestoShow = ['2011-04-23','2010-12-15']; 
     jQuery("#list483").jqGrid('showCol',datestoShow); 
    }) 

這裏是jsfiddle與完整代碼在樞軸上的網格。

網格工具欄有兩個按鈕，隱藏和顯示。當用戶點擊隱藏，它應該隱藏日期列「2011-04-23」，「2010-12-15」，當用戶點擊顯示，它應該顯示的日期列「2011 -04-23'，'2010-12-15'。

我用下面的代碼來實現隱藏和隱藏按鈕

$('#btnHide').click(function(){ 
      var datestoHide = ['2011-04-23','2010-12-15']; 
     jQuery("#list483").jqGrid('hideCol',datestoHide); 
    }) 

就顯示按鈕

$('btnShow').click(function(){ 
     var datestoShow = ['2011-04-23','2010-12-15']; 
     jQuery("#list483").jqGrid('showCol',datestoShow); 
    }) 

但的點擊事件的點擊事件顯示

代碼行jQuery("#list483").jqGrid('hideCol',datestoHide);和jQuery("#list483").jqGrid('showCol',datestoShow);似乎不起作用。爲什麼是這樣，我如何隱藏/顯示列？

Answer 1

方法hideCol/showCol允許隱藏/顯示列名網格列，但也有名字'2011-04-23'和'2010-12-15'沒有列。這是原始代碼無法工作的原因。第一列的名稱分別爲x0,x1，...然後是名稱爲y0,y1,y2，...的其他列組。因此，一個可以修復的代碼

$('#btnHide').click(function() { 
    //var datestoHide = ['2011-04-23','2010-12-15']; 
    var datestoHide = ['y1','y3']; 
    $("#list483").jqGrid('hideCol', datestoHide); 
}); 

$('#btnShow').click(function() { 
    //var datestoShow = ['2011-04-23','2010-12-15']; 
    var datestoShow = ['y1','y3']; 
    $("#list483").jqGrid('showCol', datestoShow); 
}); 

見https://jsfiddle.net/sppc21dm/3/

一個可以使通過的jqGrid的使用pivotOptions選項，這將是jqPivot設置的代碼更加動感。該pivotOptions選項包含許多helpfulk信息包括yIndex屬性，它可以用它來找到

function getYColumnName (yValue) { 
    var yIndex = $("#list483").jqGrid("getGridParam", "pivotOptions").yIndex, 
     length = yIndex.getIndexLength(), i, item; 
    for (i = 0; i < length; i++) { 
     item = yIndex.getItem(i); 
     // item is array with different y-values. 
     // We use yDimension with one element "salesdate", thus every item is array 
     // with one element item[0], which we can test to find "salesdate" 
     if (yValue === item[0]) { 
      return "y" + i; 
     } 
    } 
} 
var columnsToHideOrShow = [getYColumnName('2011-04-23'),getYColumnName('2010-12-15')]; 

$('#btnHide').click(function() { 
    $("#list483").jqGrid('hideCol', columnsToHideOrShow); 
}); 

$('#btnShow').click(function(){ 
    $("#list483").jqGrid('showCol', columnsToHideOrShow); 
}); 

見https://jsfiddle.net/sppc21dm/2/