响应式jqGrid，带有引导类到列标题 [英] Responsive jqGrid with bootstrap classes to the column headers
问题描述
我有以下简单的jQGrid。所有我需要的是响应表，其中一些列隐藏在移动视图中使用引导辅助类，例如hidden-xs
I have the below simple jQGrid. All I need is responsive table with some columns hidden in mobile view using bootstrap helper classes such as 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事件调用的以下代码。
The column ComboDuration I want to hide for mobile devices. So I tried the following code that called from gridComplete event.
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生成如下代码
It successfully adds the classes to the header, but unfortunately jgGrid generates a code like below
< th class =ui-state-default ui-th-column ui-th-ltr hidden-xsrole =columnheaderid = categorysummary_ComboDurationstyle =width：122px;> 查看样式宽度：122px。如何摆脱这个？
<th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_ComboDuration" style="width: 122px;"> Look at the style width:122px. How to get rid of this?
DEMO LINK
推荐答案
如果您需要删除内联CSS样式宽度你可以使用像 .css（width，）; 这样的调用，但我不认为这是问题所在你有。我认为你真正需要做的是在第一行的相应单元格中应用类 hidden-xs （ tr.jqgfirstrow ）网格和列标题的每一行的相应单元格。函数 applyClassesToHeaders 可以更改为以下内容：
If you need to remove inline CSS style width you can use call like .css("width", "");, but I don't think that it's the problem which you have. I think that what you really need to do is to apply the class hidden-xs on the corresponding cell of the first row (tr.jqgfirstrow) of the grid and on the corresponding cells of every row of the column header. The function applyClassesToHeaders can be changed to the following:
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/
You can see the results on the modified demo http://jsfiddle.net/OlegKi/andm1299/2/
顺便说一下，即使您使用 filterToolbar ，相同的代码仍然有效：请参阅 http://jsfiddle.net/OlegKi/andm1299/3/
By the way, the same code works even if you use filterToolbar: see http://jsfiddle.net/OlegKi/andm1299/3/
最后一句话。上面的演示看起来正确，但jqGrid仍然无法在 setGridWidth 函数中正确完成。它看到不是隐藏列，因为应用的类是隐藏的。它仅考虑 colModel 的隐藏属性的值。因此，如果您在另一个更复杂的示例中发现一些问题，则必须添加隐藏属性的设置（或调用 hideCol 方法）。我将更多地分析问题，并在免费的jqGrid代码中添加相应的更改，但是如果必须使用jqGrid 4.6，则必须遵循上述步骤。
The last remark. The above demos looks correctly, but jqGrid still work not full correctly in setGridWidth function. It "sees" not the hidden column because of the applied class as hidden. It take in consideration only the value of hidden property of colModel. So if you will find some problems in another more complex example you will have to add setting of hidden property (or the call of hideCol method). I will analyse the problem more and add the corresponding changes in free jqGrid code, but if you have to use jqGrid 4.6 than you have to follows described above steps.
更新：我在fork中的jqGrid代码中进行了相应的更改free jqGrid，我自2014年底开始，在更改jqGrid的许可协议并启动 Guriddo jqGrid JS后缩短。免费jqGrid具有 labelClasses 属性以及类。因此，要解决您描述的问题，不需要调用任何 applyClassesToHeaders 方法。只需添加类：hidden-xs，labelClasses：hidden-xs属性到网格的相应列。请在此处查看相应的JSFiddle演示： http://jsfiddle.net/OlegKi/andm1299/5/。我今天将发布4.9版本的免费jqGrid。因此，最新的更改将包含在发布中。
UPDATED: I made the corresponding changes in the code of jqGrid in the fork "free jqGrid", which I develop since the end of 2014, short after changing the Licence agreements of jqGrid and starting Guriddo jqGrid JS. Free jqGrid have the property labelClasses together with classes. Thus to solve the problem which you describe one don't need to call any applyClassesToHeaders method. It's enough just add classes: "hidden-xs", labelClasses: "hidden-xs" properties to the corresponding columns of the grid. See the corresponding JSFiddle demo here: http://jsfiddle.net/OlegKi/andm1299/5/. I will publish today version 4.9 of free jqGrid. So the latest changes will be included in the release.
更新2：演示 http://jsfiddle.net/OlegKi/andm1299/6/ 与前一个版本相同，但它使用刚刚从CDN发布的免费jqGrid 4.9 jsDelivr.com。
UPDATED 2: The demo http://jsfiddle.net/OlegKi/andm1299/6/ is the same as the previous one, but it uses just released free jqGrid 4.9 from CDN jsDelivr.com.
这篇关于响应式jqGrid，带有引导类到列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
