Как скрыть/показать столбцы на сводной сетке?

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/

можно сделать код более динамичным путем использования pivotOptions варианта jqGrid, который будет установлен на 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/