响应/流畅的jQGrid与Twitter Bootstrap

Question

我开始在许多地方创建应用程序使用jQgrid.现在,客户希望使用Twitter Bootstrap,以便他们可以在iPad中很好地查看该网站.

除了jQGrid插件,我们几乎完成了所有工作.它使用a 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选项:autowidth:true,shrinkToFit:true,

Answer 2

我建议看看这个答案,了解如何使用该setGridWidth方法制作网格流体的一些想法.此外,您应该查看以下网格选项:

• autowidth

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

• 缩小以适合

此选项(如果已设置)定义应如何重新计算网格列的宽度,同时考虑网格的宽度.如果此值为true,并且还设置了列的宽度,则每个列都按其宽度成比例缩放.

该shrinkToFit选项默认设置,但您需要明确设置autowidth.

这有帮助吗？