jquery - 响应式 jqGrid，带有列标题的 Bootstrap 类

Question

我有以下简单的 jQGrid。我所需要的只是响应式表格，其中一些列使用 bootstrap helper 类(例如 hide-xs)隐藏在移动 View 中

 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);
        }
    }
};

它成功地将类添加到 header ，但不幸的是 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]);

您可以在修改后的演示 http://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 许可协议(protocol)并开始 Guriddo jqGrid JS 后不久。免费的 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。