使jqGrid在Web浏览器上响应的方法

Question

我是jqGrid的新手，我需要在调整Web浏览器窗口大小时调整网格大小。 我申请了autowidth : true; ， shrinkToFit: true; 在网格中，但这是行不通的。

设置CSS width : 100%是唯一的一个实现，但在jqGrid的情况下它并不好
它在许多内部结构中明确地设置了px width 。

什么是解决它的最佳方法？

Answer 1

jqGrid在许多内部结构（div，表等）上使用固定width值。 所以不能只设置CSS width : 100% 。 然而，还有另一种方法可以做到这一点。 可以在window对象上注册resize事件处理程序并显式调用setGridWidth 。 该方法将jqGrid的所有内部结构调整为新宽度。 所以这将是干净的方法。

如果使用autowidth: true则jqGrid仅将jqGrid的宽度设置为其父级的宽度一次。 在$(window).resize处理程序内部，我们可以获得父级的新 （当前）宽度并重置网格width的值。 相应的代码如下

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

我用$("#list").closest(".ui-jqgrid")而不是$("#list")因为jqGrid的建立在主一些潜水<table>元素。 $("#list").closest(".ui-jqgrid")给出外部 div，其中包含网格的所有元素。

改进的小提琴演示演示代码实时。

Answer 2

我写了一个可以用来制作网格响应的CSS： https ： //github.com/guylando/Responsive-jqGrid/blob/master/Responsive-jqGrid.css

在我看来它比使用javascript更快。

这是css代码：

 .ui-jqgrid .ui-jqgrid-toppager .ui-pager-control, .ui-jqgrid .ui-jqgrid-pager .ui-pager-control { height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-pager-control td[id$="_toppager_right"], .ui-jqgrid .ui-pager-control td[id$="pager_right"] { width: auto !important; white-space: normal !important; height: auto; } .ui-jqgrid .ui-jqgrid-bdiv, .ui-jqgrid .ui-jqgrid-view.table-responsive, .ui-jqgrid, .ui-jqgrid-pager, .ui-jqgrid-toppager, .ui-jqgrid-hdiv { width: auto !important; } .ui-jqgrid .ui-pager-control td[id$="_toppager_left"], .ui-jqgrid .ui-pager-control td[id$="pager_left"], .ui-jqgrid .ui-pager-control td[id$="_toppager_center"], .ui-jqgrid .ui-pager-control td[id$="pager_center"] { overflow-x: auto; overflow-y: hidden; } 

Answer 3

添加到下面的方法到jqgrid的beforeEvent ......

功能

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

我尝试了以下代码，但发现它没有为响应设备提供任何滚动条。 因此决定自定义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完全响应！

任何其他建议将是最受欢迎的。 尝试一下并享受吧！