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

Question

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

除了 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});

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

使用 jQgrid 作为响应性/流体布局支持的任何想法/建议？

score 9 · Accepted Answer

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

将您的表格包装在 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 选项：autowidth: true, shrinkToFit: true,

score 5 · Accepted Answer

我建议查看这个答案，以了解有关如何使用该setGridWidth方法使网格流动的一些想法。此外，您应该查看以下网格选项：

自动宽度

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

缩小以适合

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

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

这有帮助吗？

score 3 · Accepted Answer

您可以添加这段代码：

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

希望这有效:)

score 0 · Accepted Answer

Yes you can make it responsive with a very simple method.

Just open your CSS and give width in % .

Example:

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

Then change table body accordingly.

score 0 · Accepted Answer

这适用于引导响应

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

将使用“your-reference-element”宽度来调整网格的大小

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

自定义 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！

任何其他建议都将受到欢迎。试试看，享受吧！

score -1 · Accepted Answer

新版 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 现有功能。

演示

资源

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

8 回答 8

Related

Reference