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

我有以下简单的jQGrid。 我需要的只是响应表，其中一些列隐藏在移动视图中，使用bootstrap辅助类（如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生成如下代码

查看样式宽度：122px 。 如何摆脱这个？

DEMO LINK

Answer 1

如果需要删除内联CSS样式width ，可以使用.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/

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

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

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