带有引导类的响应式 jqGrid 到列标题

Question

我有以下简单的 jQGrid。我所需要的只是响应式表格，其中一些列隐藏在移动视图中，使用引导辅助类（如 hidden-xs）

 var gridInfoJSON = JSON.parse($('#hdn-categorysummary').val());

   var catGrid= jQuery("#categorysummary").jqGrid({
        url: '/Category/GetCategories/',
        datatype: 'json',
        mtype: 'POST',

        colNames: ["Id", "Active", "Name", "Duration"],
        colModel: [
        { name: 'Id', index: 'Id', hidden: true },
        { name: 'IsActive', index: 'IsActive', align: 'center', formatter: activeCheckBoxFormatter, sortable: false,classes:'col-sm-1' },
        { name: 'CategoryName', index: 'CategoryName', formatter: generateCategoryNameLink, sortable: false },

        { name: 'ComboDuration', index: 'ComboDuration', classes:'hidden-xs' , align: 'center', sortable: false }       
        ],
        jsonReader: {
            id: 'Id',
            repeatitems: false
        },

        height: "100%",
        width: "100%",
        rownumbers: true,
        rowNum: 1000,
        sortname: 'Id',
        caption: 'BookingCategories',
        loadComplete: function () {
            var table = this;
            setTimeout(function () {
                updatePagerIcons(table);
                var targetWidth = $(".page-content").width() - 20;
                $('#categorysummary').jqGrid('setGridWidth', targetWidth);
                $('#categorysummary').parents('div.ui-jqgrid-bdiv:first').width(targetWidth + 1);
            }, 0);
        },
        gridComplete:function(){
          applyClassesToHeaders(catGrid);
        },
        sortorder: 'asc',
        viewrecords: true

我想为移动设备隐藏的 ComboDuration 列。所以我尝试了以下从 gridComplete 事件调用的代码。

var applyClassesToHeaders = function (grid) {
    var trHead = jQuery("thead:first tr", grid.hdiv);
    var colModel = grid.getGridParam("colModel");    
    for (var iCol = 0; iCol < colModel.length; iCol++) {
        var columnInfo = colModel[iCol];
        if (columnInfo.classes) {
            var headDiv = jQuery("th:eq(" + iCol + ")", trHead);            
            headDiv.addClass(columnInfo.classes);
        }
    }
};

它成功地将类添加到标题中，但不幸的是 jgGrid 生成如下代码

<th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_ComboDuration" style="width: 122px;">看样式宽度：122px。如何摆脱这种情况？

DEMO LINK

Answer 1

如果您需要删除内联 CSS 样式 width，您可以使用 .css("width", ""); 之类的调用，但我认为这不是您遇到的问题。我认为您真正需要做的是将hidden-xs 类应用于网格第一行（tr.jqgfirstrow）的相应单元格以及列标题每一行的相应单元格。函数applyClassesToHeaders可以改成如下：

function applyClassesToHeaders(table) {
    var columnInfo, iCol, iRow,
        htable = $(table.grid.hDiv).find("table.ui-jqgrid-htable")[0],
        firstRow = table.rows[0];
        colModel = $(table).jqGrid("getGridParam", "colModel");     
    for (iCol = 0; iCol < colModel.length; iCol++) {
        columnInfo = colModel[iCol];
        if (columnInfo.classes) {
            for (iRow = 0; iRow < htable.rows.length; iRow++) {
                $(htable.rows[iRow].cells[iCol]).addClass(columnInfo.classes);
            }
            $(firstRow.cells[iCol]).addClass(columnInfo.classes);
        }
    }
}

applyClassesToHeaders($grid[0]);

你可以在修改后的demohttp://jsfiddle.net/OlegKi/andm1299/2/看到结果

顺便说一句，即使您使用filterToolbar，同样的代码也可以工作：请参阅http://jsfiddle.net/OlegKi/andm1299/3/

最后一句话。上面的演示看起来正确，但 jqGrid 在setGridWidth 函数中仍然不能正常工作。它“看到”不是隐藏列，因为应用的类是隐藏的。它只考虑colModel 的hidden 属性的值。因此，如果您在另一个更复杂的示例中发现一些问题，则必须添加hidden 属性的设置（或hideCol 方法的调用）。我会更多地分析问题并在免费的jqGrid代码中添加相应的更改，但是如果您必须使用jqGrid 4.6，则必须按照上述步骤进行操作。

更新：我在fork"free jqGrid"中对jqGrid的代码进行了相应的修改，这是我从2014年底开始开发的，在更改jqGrid的许可协议并启动@987654324之后不久@。免费的 jqGrid 拥有labelClasses 和classes 的属性。因此，要解决您描述的问题，不需要调用任何applyClassesToHeaders 方法。只需将classes: "hidden-xs", labelClasses: "hidden-xs" 属性添加到网格的相应列就足够了。在此处查看相应的 JSFiddle 演示：http://jsfiddle.net/OlegKi/andm1299/5/。我今天将发布免费的 jqGrid 4.9 版。因此，最新的更改将包含在版本中。

更新 2： 演示 http://jsfiddle.net/OlegKi/andm1299/6/ 与上一个相同，但它使用 CDN jsDelivr.com 刚刚发布的免费 jqGrid 4.9。