如何 hide/show 枢轴网格上的列？

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' 并且当用户点击 show 时，它应该显示日期列 '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); 似乎不起作用。为什么会这样，我如何 hide/show 列？

Answer 1

方法 hideCol/showCol 允许 hide/show 网格的列 按列名称 ，但没有列带有姓名 '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 选项包含许多有用的信息，包括 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/

如何 hide/show 枢轴网格上的列？

How to hide/show columns on a pivot grid?

jquery

jqgrid

free-jqgrid

jqpivot