jQuery 带有 Twitter Bootstrap 的响应式/流畅 jQGrid
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18210540/
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/fluid jQGrid with Twitter Bootstrap
提问by Billa
I started creating application uses jQgrid in many places. Now the customer wanted to use Twitter Bootstrapso they can view the site nicely in iPad.
我开始在很多地方创建使用 jQgrid 的应用程序。现在客户想要使用Twitter Bootstrap以便他们可以在 iPad 上很好地查看站点。
We have atmost done everything, except jQGrid plugin. It uses a px widthfor defining width of the grid and column width.
除了jQGrid插件之外，我们最多已经完成了所有工作。它使用 apx width来定义网格的宽度和column width。
jQuery("#list2").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
I have no idea about How to deal this responsive issue with jQGrid. Alternatively I can replace jQGrid with DataTablePlugin for responsiveness. But we use jQgrid in many place and functions very well, we dont want to break existing functionality.
我不知道如何用 jQGrid 处理这个响应式问题。或者，我可以用DataTable插件替换 jQGrid 以提高响应能力。但是我们在很多地方使用jQgrid，功能很好，我们不想破坏现有的功能。
Any idea/suggestions to use jQgrid as responsiveness/fluid layout support?
使用 jQgrid 作为响应性/流畅布局支持的任何想法/建议？
回答by ThEBiShOp
I found this solution, it works fine on my apps.
我找到了这个解决方案，它在我的应用程序上运行良好。
Wrap you table in a div :
将你的表包裹在一个 div 中：
<div id="jqGrid_container">
<table id="jqList"></table>
<div id="jqPager"></div>
</div>
And in your javascript code :
在你的 javascript 代码中：
$(window).bind('resize', function() {
var width = $('#jqGrid_container').width();
$('#jqList').setGridWidth(width);
});
or if you don't need to resize, just :
或者如果您不需要调整大小，只需：
$( document ).ready(function() {
var width = $('#jqGrid_container').width();
$('#jqList').setGridWidth(width);
});
I think you also need to put in your jqgrid options : autowidth: true, shrinkToFit: true,
我认为您还需要输入 jqgrid 选项：autowidth: true、shrinkToFit: true、
回答by Justin Ethier
I suggest looking at this answerfor some ideas on how to make the grid fluid using the setGridWidthmethod. In addition you should look the following grid options:
我建议查看此答案以了解有关如何使用该setGridWidth方法制作网格流体的一些想法。此外，您应该查看以下网格选项：
- autowidth
When set to true, the grid width is recalculated automatically to the width of the parent element. This is done only initially when the grid is created. In order to resize the grid when the parent element changes width you should apply custom code and use the setGridWidth method for this purpose
- shrinkToFit
This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width.
- 自动宽度
设置为 true 时，网格宽度会自动重新计算为父元素的宽度。这仅在创建网格时最初完成。为了在父元素更改宽度时调整网格大小，您应该应用自定义代码并为此使用 setGridWidth 方法
- 缩小到适合
此选项（如果设置）定义应如何重新计算网格列的宽度，同时考虑网格的宽度。如果此值为真，并且列的宽度也已设置，则每一列都按其宽度成比例缩放。
The shrinkToFitoption is set by default, but you will need to explicitly set autowidth.
该shrinkToFit选项默认设置，但您需要显式设置autowidth.
Does that help?
这有帮助吗？
回答by NehaDubey
You can add this piece of code :
您可以添加这段代码：
jQuery("#grid").jqGrid({
......
beforeRequest: function() {
responsive_jqgrid($("#divWhereYourgridIsDisplayed"));
},
.......
});
And after this, you should add:
在此之后，您应该添加：
function responsive_jqgrid(jqgrid) {
jqgrid.find('.ui-jqgrid').addClass('clear-margin span12').css('width', '');
jqgrid.find('.ui-jqgrid-view').addClass('clear-margin span12').css('width', '');
jqgrid.find('.ui-jqgrid-view > div').eq(1).addClass('clear-margin span12').css('width', '').css('min-height', '0');
jqgrid.find('.ui-jqgrid-view > div').eq(2).addClass('clear-margin span12').css('width', '').css('min-height', '0');
jqgrid.find('.ui-jqgrid-sdiv').addClass('clear-margin span12').css('width', '');
jqgrid.find('.ui-jqgrid-pager').addClass('clear-margin span12').css('width', '');
}
Hope this works :)
希望这有效:)
回答by user3140404
This works well for bootstrap responsive
这适用于引导响应
jQuery("#your-list-id").setGridWidth($('.your-reference-element').width()-10, true);
will use "your-reference-element" width to resize the grid
将使用“您的参考元素”宽度来调整网格的大小
回答by Ajis
Yes you can make it responsive with a very simple method.
是的，您可以使用非常简单的方法使其响应。
Just open your CSS and give width in %.
只需打开你的 CSS 并在% 中给出宽度。
Example:
例子：
ui-grid{ width:100% !important; }
Then change table body accordingly.
然后相应地更改表体。
回答by Tanvi
Customised CSS
自定义 CSS
I tried the following code but observed that it did not provide any scroller for responsive devices. Hence decided to customise the JQGRID stylesheet:
我尝试了以下代码，但发现它没有为响应式设备提供任何滚动条。因此决定自定义 JQGRID 样式表：
$(window).on("resize", function () {
var $grid = $("#list"),
newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
});
Please find my hack for making JQ Grid properly responsive
请找到我使 JQ Grid 正确响应的技巧
/**** JQ grid responsiveness ***/
/**** JQ 网格响应度 ***/
#gview_jqgrid, div#myPager {width:100% !important;height:100% !important;}
.ui-jqgrid-hdiv, .ui-jqgrid-htable {width:100% !important;height:100% !important;}
.ui-jqgrid-bdiv, #jqgrid {width:100% !important;height:100% !important;}
.ui-jqgrid .ui-jqgrid-hbox {padding-right:0 !important;}
.ui-jqgrid tr.jqgrow td { white-space: pre-wrap !important;}
div#gbox_jqgrid { width: 100% !important; overflow-x: scroll; margin-bottom: 80px !important;}
Add this to the custom stylesheet & get set to view the JQGrid fully responsive!
将此添加到自定义样式表并设置为查看完全响应的 JQGrid！
Any other suggestions will be most welcomed. Try it out & Enjoy!
任何其他建议将是最受欢迎的。尝试并享受！
回答by Yuri Sitnikov
Next code makes all jqgrid tables on page responsive:
下一个代码使页面上的所有 jqgrid 表响应：
$(window).on("resize", function() {
$('.ui-jqgrid').each(function(){
$('#'+$(this).attr("id").substring(5)).setGridWidth($(this).parent().width());
});
});
回答by Almas
New version of jqGrid 5.0 has native support of Bootstrap.
新版 jqGrid 5.0 原生支持 Bootstrap。
As of version 5.0 Guriddo jqGrid can be adapted easy with any CSS framework. We have developed a Bootstrap port. To use the feature you will need only to include the appropriate CSS
从 5.0 版本开始，Guriddo jqGrid 可以很容易地适应任何 CSS 框架。我们已经开发了一个 Bootstrap 端口。要使用该功能，您只需要包含适当的 CSS
<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />
file and tell jqGrid to use Bootstrap – with the option:
文件并告诉 jqGrid 使用 Bootstrap – 使用以下选项：
$("#grid").jqGrid( {
...
styleUI : "Bootstrap",
...
});
Except Column Chooser and re sizing the grid with a mouse we support all the jqGrid existing features.
除了列选择器和使用鼠标调整网格大小之外，我们支持所有 jqGrid 现有功能。
