twitter-bootstrap 响应式 jqGrid 与列标题的引导程序类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30819619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive jqGrid with bootstrap classes to the column headers
提问by Murali Murugesan
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
我有以下简单的 jQGrid。我所需要的只是响应式表，其中一些列使用 bootstrap helper 类（例如 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
The column ComboDuration I want to hide for mobile devices. So I tried the following code that called from gridComplete event.
我想为移动设备隐藏的 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);
}
}
};
It successfully adds the classes to the header, but unfortunately jgGrid generates a code like below
它成功地将类添加到标题中，但不幸的是 jgGrid 生成了如下所示的代码
<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?
<th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_ComboDuration" style="width: 122px;">看样式宽度：122px。如何摆脱这个？
采纳答案by Oleg
If you need to remove inline CSS style widthyou 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-xson 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 applyClassesToHeaderscan be changed to the following:
如果您需要删除内联 CSS 样式，width您可以使用 call like .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]);
You can see the results on the modified demo http://jsfiddle.net/OlegKi/andm1299/2/
您可以在修改后的演示http://jsfiddle.net/OlegKi/andm1299/2/上看到结果
By the way, the same code works even if you use filterToolbar: see http://jsfiddle.net/OlegKi/andm1299/3/
顺便说一句，即使您使用相同的代码也能工作filterToolbar：见http://jsfiddle.net/OlegKi/andm1299/3/
The last remark. The above demos looks correctly, but jqGrid still work not full correctly in setGridWidthfunction. It "sees" not the hidden column because of the applied class as hidden. It take in consideration only the value of hiddenproperty of colModel. So if you will find some problems in another more complex example you will have to add setting of hiddenproperty (or the call of hideColmethod). 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.
最后一句话。上面的演示看起来正确，但 jqGrid 在setGridWidth功能上仍然不能正常工作。它“看到”不是隐藏的列，因为应用的类是隐藏的。它只考虑 的hidden属性值colModel。因此，如果您在另一个更复杂的示例中发现一些问题，则必须添加hidden属性设置（或hideCol方法调用）。我将更多地分析问题并在免费的 jqGrid 代码中添加相应的更改，但是如果您必须使用 jqGrid 4.6，则必须遵循上述步骤。
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 labelClassestogether with classes. Thus to solve the problem which you describe one don't need to call any applyClassesToHeadersmethod. 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.
更新：我在2014 年底开发的 fork "free jqGrid" 中对 jqGrid 的代码进行了相应的更改，在更改 jqGrid 的许可协议并启动Guriddo jqGrid JS 后不久。免费 jqGridlabelClasses与classes. 因此，要解决您描述的问题，不需要调用任何applyClassesToHeaders方法。只需将classes: "hidden-xs", labelClasses: "hidden-xs"属性添加到网格的相应列即可。在此处查看相应的 JSFiddle 演示：http: //jsfiddle.net/OlegKi/andm1299/5/。我今天将发布免费的 jqGrid 4.9 版。因此，最新的更改将包含在版本中。
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.
更新 2：演示http://jsfiddle.net/OlegKi/andm1299/6/与前一个相同，但它使用 CDN jsDelivr.com 刚刚发布的免费 jqGrid 4.9。
