带有 Twitter Bootstrap 的响应式/流畅的 jQGrid

Question

我开始在很多地方使用 jQgrid 创建应用程序。现在客户想使用Twitter Bootstrap，以便他们可以在 iPad 上很好地查看该网站。

除了 jQGrid 插件之外，我们最多已经完成了所有工作。它使用px 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});

我不知道如何使用 jQGrid 处理这个响应式问题。或者，我可以用 DataTable 插件替换 jQGrid 以提高响应能力。但是我们在很多地方都使用了jQgrid，并且功能很好，我们不想破坏现有的功能。

对使用 jQgrid 作为响应性/流畅布局支持有什么想法/建议吗？

Answer 1

我找到了这个解决方案，它在我的应用上运行良好。

将表格包装在 div 中：

<div id="jqGrid_container">
    <table id="jqList"></table>
    <div id="jqPager"></div>
</div>

在你的 javascript 代码中：

$(window).bind('resize', function() {
    var width = $('#jqGrid_container').width();
    $('#jqList').setGridWidth(width);
});

或者如果您不需要调整大小，只需：

$( document ).ready(function() {
    var width = $('#jqGrid_container').width();
    $('#jqList').setGridWidth(width);
});

我认为您还需要输入 jqgrid 选项： 自动宽度：真， shrinkToFit: true,

Answer 2

我建议查看this answer，了解有关如何使用setGridWidth 方法使网格流动的一些想法。此外，您应该查看以下网格options：

• 自动宽度

设置为 true 时，网格宽度会自动重新计算为父元素的宽度。这仅在最初创建网格时完成。为了在父元素更改宽度时调整网格大小，您应该应用自定义代码并为此使用 setGridWidth 方法

• shrinkToFit

此选项（如果设置）定义应如何重新计算网格列的宽度，同时考虑到网格的宽度。如果该值为真，并且列的宽度也已设置，则每列都按其宽度成比例缩放。

shrinkToFit 选项默认设置，但您需要显式设置autowidth。

这有帮助吗？

Answer 3

您可以添加这段代码：

jQuery("#grid").jqGrid({
......
 beforeRequest: function() {
                    responsive_jqgrid($("#divWhereYourgridIsDisplayed"));
                },
.......
});

在此之后，您应该添加：

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

希望这可行:)

Answer 4

这适用于引导响应

jQuery("#your-list-id").setGridWidth($('.your-reference-element').width()-10, true);

将使用“您的参考元素”宽度来调整网格的大小

Answer 5

是的，您可以通过一种非常简单的方法使其具有响应性。

只需打开您的 CSS 并在 % 中指定宽度。

例子：

ui-grid{ width:100% !important; }

然后相应地更改表体。

Answer 6

自定义 CSS

我尝试了以下代码，但发现它没有为响应式设备提供任何滚动条。因此决定自定义 JQGRID 样式表：

$(window).on("resize", function () {
    var $grid = $("#list"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
});

请找到我的 hack 以使 JQ Grid 正确响应

/**** 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;}

将此添加到自定义样式表并设置以查看完全响应的 JQGrid！

任何其他建议都将受到欢迎。尝试并享受！

Answer 7

下一个代码使页面上的所有 jqgrid 表都响应：

$(window).on("resize", function() {
    $('.ui-jqgrid').each(function(){
        $('#'+$(this).attr("id").substring(5)).setGridWidth($(this).parent().width());
    });
});

Answer 8

新版 jqGrid 5.0 原生支持 Bootstrap。

从 5.0 版开始，Guriddo jqGrid 可以轻松适应任何 CSS 框架。我们开发了一个 Bootstrap 端口。要使用该功能，您只需要包含适当的 CSS

<link rel="stylesheet" type="text/css" media="screen" href="path_to_css_files/ui.jqgrid-bootstrap.css" />

文件并告诉 jqGrid 使用 Bootstrap - 带有选项：

$("#grid").jqGrid( {
    ...
    styleUI : "Bootstrap",
    ...
 });

除了列选择器和使用鼠标调整网格大小外，我们支持所有 jqGrid 现有功能。

Demo

Source