blocks|key|1340349|text|我已经在生产中使用了一段时间了，没有任何抱怨(可能需要一些调整才能在你的网站上看到正确的效果。例如，减去侧边栏的宽度等)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340350|$(window).bind('resize',+function()+{
++++$("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');|code-block|syntax|javascript|1340351|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Been using this in production for some time now without any complaints (May take some tweaking to look right on your site.. for instance, subtracting the width of a sidebar, etc)

<pre><code>$(window).bind('resize', function() {
 $("#jqgrid").setGridWidth($(window).width());
}).trigger('resize');
</code></pre>

blocks|key|1340318|text|自动调整大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340319|对于jQgrid+3.5%2B|1340320|++++++++if+(grid+=+$('.ui-jqgrid-btable:visible'))+{
++++++++++++grid.each(function(index)+{
++++++++++++++++gridId+=+$(this).attr('id');
++++++++++++++++gridParentWidth+=+$('#gbox_'+%2B+gridId).parent().width();
++++++++++++++++$('#'+%2B+gridId).setGridWidth(gridParentWidth);
++++++++++++});
++++++++}|code-block|syntax|javascript|1340321|对于jQgrid+3.4.x：|1340322|+++++++if+(typeof+$('table.scroll').setGridWidth+==+'function')+{
++++++++++++$('table.scroll').setGridWidth(100,+true);+//reset+when+grid+is+wider+than+container+(div)
++++++++++++if+(gridObj)+{

++++++++++++}+else+{
++++++++++++++++$('#contentBox_content+.grid_bdiv:reallyvisible').each(function(index)+{
++++++++++++++++++++grid+=+$(this).children('table.scroll');
++++++++++++++++++++gridParentWidth+=+$(this).parent().width()+–+origami.grid.gridFromRight;
++++++++++++++++++++grid.setGridWidth(gridParentWidth,+true);
++++++++++++++++});
++++++++++++}
++++++++}|1340323|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Auto resize:

For jQgrid 3.5+

<pre><code> if (grid = $('.ui-jqgrid-btable:visible')) {
 grid.each(function(index) {
 gridId = $(this).attr('id');
 gridParentWidth = $('#gbox_' + gridId).parent().width();
 $('#' + gridId).setGridWidth(gridParentWidth);
 });
 }
</code></pre>

For jQgrid 3.4.x:

<pre><code> if (typeof $('table.scroll').setGridWidth == 'function') {
 $('table.scroll').setGridWidth(100, true); //reset when grid is wider than container (div)
 if (gridObj) {

 } else {
 $('#contentBox_content .grid_bdiv:reallyvisible').each(function(index) {
 grid = $(this).children('table.scroll');
 gridParentWidth = $(this).parent().width() – origami.grid.gridFromRight;
 grid.setGridWidth(gridParentWidth, true);
 });
 }
 }
</code></pre>

blocks|key|1555919|text|这对我来说似乎很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1555920|$(window).bind('resize',+function()+{
++++jQuery("#grid").setGridWidth($('#parentDiv').width()-30,+true);
}).trigger('resize');|code-block|syntax|javascript|1555921|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this seems to be working nicely for me 

<pre><code>$(window).bind('resize', function() {
 jQuery("#grid").setGridWidth($('#parentDiv').width()-30, true);
}).trigger('resize');
</code></pre>

blocks|key|1555952|text|我使用960.gs进行布局，所以我的解决方案如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1555953|++++$(window).bind(
++++++++'resize',
++++++++function()+{
++++++++++++++++++++//++Grid+ids+we+are+using
++++++++++++$("#demogr,+#allergygr,+#problemsgr,+#diagnosesgr,+#medicalhisgr").setGridWidth(
++++++++++++++++++++$(".grid_5").width());
++++++++++++$("#clinteamgr,+#procedgr").setGridWidth(
++++++++++++++++++++$(".grid_10").width());
++++++++}).trigger('resize');
//+Here+we+set+a+global+options

jQuery.extend(jQuery.jgrid.defaults,+{
++++//+altRows:true,
++++autowidth+:+true,
++++beforeSelectRow+:+function(rowid,+e)+{+//+disable+row+highlighting+onclick
++++++++return+false;
++++},
++++datatype+:+"jsonstring",
++++datastr+:+grdata,++//++JSON+object+generated+by+another+function
++++gridview+:+false,
++++height+:+'100%25',
++++hoverrows+:+false,
++++loadonce+:+true,
++++sortable+:+false,
++++jsonReader+:+{
++++++++repeatitems+:+false
++++}
});

//+Demographics+Grid

$("#demogr").jqGrid(+{
++++caption+:+"Demographics",
++++colNames+:+[+'Info',+'Data'+],
++++colModel+:+[+{
++++++++name+:+'Info',
++++++++width+:+"30%25",
++++++++sortable+:+false,
++++++++jsonmap+:+'ITEM'
++++},+{
++++++++name+:+'Description',
++++++++width+:+"70%25",
++++++++sortable+:+false,
++++++++jsonmap+:+'DESCRIPTION'
++++}+],
++++jsonReader+:+{
++++++++root+:+"DEMOGRAPHICS",
++++++++id+:+"DEMOID"
++++}
});|code-block|syntax|javascript|1555954|//下面定义的其他网格...|1555955|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I'm using 960.gs for layout so my solution is as follows:

<pre><code> $(window).bind(
 'resize',
 function() {
 // Grid ids we are using
 $("#demogr, #allergygr, #problemsgr, #diagnosesgr, #medicalhisgr").setGridWidth(
 $(".grid_5").width());
 $("#clinteamgr, #procedgr").setGridWidth(
 $(".grid_10").width());
 }).trigger('resize');
// Here we set a global options

jQuery.extend(jQuery.jgrid.defaults, {
 // altRows:true,
 autowidth : true,
 beforeSelectRow : function(rowid, e) { // disable row highlighting onclick
 return false;
 },
 datatype : "jsonstring",
 datastr : grdata, // JSON object generated by another function
 gridview : false,
 height : '100%',
 hoverrows : false,
 loadonce : true,
 sortable : false,
 jsonReader : {
 repeatitems : false
 }
});

// Demographics Grid

$("#demogr").jqGrid( {
 caption : "Demographics",
 colNames : [ 'Info', 'Data' ],
 colModel : [ {
 name : 'Info',
 width : "30%",
 sortable : false,
 jsonmap : 'ITEM'
 }, {
 name : 'Description',
 width : "70%",
 sortable : false,
 jsonmap : 'DESCRIPTION'
 } ],
 jsonReader : {
 root : "DEMOGRAPHICS",
 id : "DEMOID"
 }
});
</code></pre>

// Other grids defined below...

blocks|key|1340282|text|借用链接中的代码，您可以尝试如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340283|$(window).bind('resize',+function()+{+
++++//+resize+the+datagrid+to+fit+the+page+properly:
++++$('div.subject').children('div').each(function()+{
++++++++$(this).width('auto');
++++++++$(this).find('table').width('100%25');
++++});
});|code-block|syntax|javascript|1340284|这样，您就可以直接绑定到window.onresize事件，它实际上就是您想要从问题中得到的东西。|1340285|如果你的网格设置为100%25宽度，当它的容器展开时，它应该会自动展开，除非你使用的插件有一些我不知道的错综复杂之处。|1340286|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Borrowing from the code at your link you could try something like this:

<pre><code>$(window).bind('resize', function() { 
 // resize the datagrid to fit the page properly:
 $('div.subject').children('div').each(function() {
 $(this).width('auto');
 $(this).find('table').width('100%');
 });
});
</code></pre>

This way you're binding directly to the window.onresize event, which actually looks like what you want from your question.

If your grid is set to 100% width though it should automatically expand when its container expands, unless there are some intricacies to the plugin you're using that I don't know about.

blocks|key|1556034|text|主要的答案对我有效，但使应用程序在IE中反应非常迟钝，所以我按照建议使用了计时器。代码如下所示($(#contentColumn)是JQGrid所在的div+)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1556035|++function+resizeGrids()+{
++++var+reportObjectsGrid+=+$("#ReportObjectsGrid");
++++reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var+resizeTimer;

$(window).bind('resize',+function+()+{
++++clearTimeout(resizeTimer);
++++resizeTimer+=+setTimeout(resizeGrids,+60);
});|code-block|syntax|javascript|1556036|entityMap^0|1C|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

The main answer worked for me but made the app extremely unresponsive in IE, so I used a timer as suggested. Code looks something like this (<code>$(#contentColumn)</code> is the div that the JQGrid sits in):

<pre><code> function resizeGrids() {
 var reportObjectsGrid = $("#ReportObjectsGrid");
 reportObjectsGrid.setGridWidth($("#contentColumn").width());
};

var resizeTimer;

$(window).bind('resize', function () {
 clearTimeout(resizeTimer);
 resizeTimer = setTimeout(resizeGrids, 60);
});
</code></pre>

blocks|key|1556134|text|堆栈溢出爱好者们好。我喜欢大多数的答案，我甚至给他们加了几个票，但由于某种奇怪的原因，这些答案都不适合我在IE8上使用……然而，我确实遇到了这些链接。这家伙写了一个看起来不错的库。将它包含在jquery+UI之外的项目中，输入您的表和div的名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1556135|http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx|offset|length|1556136|http://code.google.com/p/codeincubator/source/browse/#svn%252FSamples%252Fsteveharman%252FjQuery%252Fjquery.jqgrid.fluid%25253Fstate%25253Dclosed|1556137|entityMap|0|LINK|mutability|MUTABLE|url|1|http://code.google.com/p/codeincubator/source/browse/#svn%252FSamples%252Fsteveharman%252FjQuery%252Fjquery.jqgrid.fluid%25253Fstate%25253Dclosed^0|0|0|2B|0|0|0|3P|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@$D|S|E|T|1|U]]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|H|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|P]]]]

Hello Stack overflow enthusiasts. I enjoyed most of answers, and I even up-voted a couple, but none of them worked for me on IE 8 for some strange reason... I did however run into these links... This guy wrote a library that seems to work. Include it in your projects in adittion to jquery UI, throw in the name of your table and the div.

<a href="http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx" rel="nofollow">http://stevenharman.net/blog/archive/2009/08/21/creating-a-fluid-jquery-jqgrid.aspx</a>

<a href="http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed" rel="nofollow">http://code.google.com/p/codeincubator/source/browse/#svn%2FSamples%2Fsteveharman%2FjQuery%2Fjquery.jqgrid.fluid%253Fstate%253Dclosed</a>

blocks|key|1555981|text|autowidth:+true|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1555982|对我来说效果很好。从here学到的。|unstyled|offset|length|1555983|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3725236^0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>autowidth: true
</code></pre>

worked perfectly for me. learnt from <a href="https://stackoverflow.com/questions/3725236">here</a>.

blocks|key|1340558|text|这行得通..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1340559|var+$targetGrid+=+$("#myGridId");
$(window).resize(function+()+{
++++var+jqGridWrapperId+=+"#gbox_"+%2B+$targetGrid.attr('id')+//here+be+dragons,+this+is+++++generated+by+jqGrid.
++++$targetGrid.setGridWidth($(jqGridWrapperId).parent().width());+//perhaps+add+padding+calculation+here?
});|code-block|syntax|javascript|1340560|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works..

<pre><code>var $targetGrid = $("#myGridId");
$(window).resize(function () {
 var jqGridWrapperId = "#gbox_" + $targetGrid.attr('id') //here be dragons, this is generated by jqGrid.
 $targetGrid.setGridWidth($(jqGridWrapperId).parent().width()); //perhaps add padding calculation here?
});
</code></pre>

blocks|key|1340548|text|<script>
$(document).ready(function(){++++
$(window).on('resize',+function()+{
++++jQuery("#grid").setGridWidth($('#fill').width(),+false);+
++++jQuery("#grid").setGridHeight($('#fill').height(),true);+
}).trigger('resize');++++++
});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1340549|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script&gt;
$(document).ready(function(){ 
$(window).on('resize', function() {
 jQuery("#grid").setGridWidth($('#fill').width(), false); 
 jQuery("#grid").setGridHeight($('#fill').height(),true); 
}).trigger('resize'); 
});
&lt;/script&gt;
</code></pre>

Is there any way to resize a <a href="http://www.trirand.com/blog/" rel="noreferrer">jqGrid</a> when the browser window is resized? I have tried the method described <a href="http://www.trirand.com/blog/?page_id=18/discussion/browser-resize-how-to-resize-jqgrid/page-1/post-3350/" rel="noreferrer">here</a> but that technique does not work in IE7.

Resize jqGrid when browser is resized?

当浏览器窗口调整大小时，有没有办法调整的大小？我尝试过描述的方法，但该技术在IE7中不起作用。

问是否在调整浏览器大小时调整jqGrid的大小？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在调整浏览器大小时调整jqGrid的大小？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在调整浏览器大小时调整jqGrid的大小？
EN