对于IE8中的Jqgrid，当我将resize事件绑定到窗口时，列调整大小不起作用。当我单击要调整大小的列时，它会显示调整大小符号但不执行任何操作。我目前正在使用jqgrid 4.4.1版本，当我使用4.1.2获得相同代码时，我没有遇到此问题。我必须使用4.4.1版本来创建子网格，将支持分组在一起，所以现在无法恢复到4.1.2版本。有没有办法解决这个问题？任何帮助是极大的赞赏。提前谢谢..
此外，我在FF / chrome中没有看到此问题，但仅在IE8中。
基本上下面的代码片段导致了这个问题，如果我注释掉这个代码列，调整大小可以解决任何问题，但是当浏览器调整大小时我无法调整网格宽度：（
$(window).bind('resize', function() {
grid.setGridWidth($(window).width() - 20);
}).trigger('resize');
以下是重现此问题的完整代码..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Window Resize Event - Grid Not Resizeable</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var grid = $("#list");
$(window).bind('resize', function() {
grid.setGridWidth($(window).width() - 20);
}).trigger('resize');
var mydata = [
{id:"1", invdate:"2007-10-01 13:03:12",name:"test", note:"note", amount:"200.00",tax:"10.00",closed:true, ship_via:"TN",total:"210.00"},
{id:"2", invdate:"2007-10-02 13:03:12",name:"test2", note:"note2", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
{id:"3", invdate:"2007-09-01 13:03:12",name:"test3", note:"note3", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
{id:"4", invdate:"2007-10-04 13:03:12",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
{id:"5", invdate:"2007-10-31 13:03:12",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
{id:"6", invdate:"2007-09-06 13:03:12",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE",total:"430.00"},
{id:"7", invdate:"2007-10-04 13:03:12",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN",total:"210.00"},
{id:"8", invdate:"2007-10-03 13:03:12",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE",total:"320.00"},
{id:"9", invdate:"2007-09-01 13:03:12",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN",total:"430.00"},
{id:"10",invdate:"2007-09-08 13:03:12",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN",total:"530.00"},
{id:"11",invdate:"2007-09-08 13:03:12",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"},
{id:"12",invdate:"2007-09-10 13:03:12",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE",total:"530.00"}
];
grid.jqGrid({
datatype:'local',
data: mydata,
colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'],
colModel:[
{name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
{name:'invdate',index:'invdate',width:80, align:'center', sorttype:'date',
formatter:'date', formatoptions: {newformat:'d-M-Y'}, datefmt: 'd-M-Y'},
{name:'name',index:'name', width:70},
{name:'amount',index:'amount',width:100, formatter:'number', align:'right'},
{name:'tax',index:'tax',width:70, formatter:'number', align:'right'},
{name:'total',index:'total',width:120, formatter:'number', align:'right'},
{name:'closed',index:'closed',width:110,align:'center', formatter: 'checkbox',
edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}},
{name:'ship_via',index:'ship_via',width:120,align:'center',formatter:'select',
edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'}},
{name:'note',index:'note',width:100,sortable:false}
],
rowNum:10,
rowList:[5,10,20],
pager: '#pager',
gridview:true,
autowidth: true,
sortname: 'invdate',
viewrecords: true,
sortorder: 'desc',
caption:'Just simple local grid',
height: '100%',
loadComplete: function(data) {
grid.setGridWidth($(window).width() - 20);
}
});
grid.jqGrid ('navGrid', '#pager',
{edit:false, add:false, del:false, refresh:true, view:false},
{},{},{},{multipleSearch:true,overlay:false});
grid.jqGrid ('navButtonAdd', '#pager',
{
caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
grid.jqGrid('columnChooser');
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
答案 0 :(得分：3)
您描述的问题的原因是Internet Explorer的兼容模式。顺便说一句，我过去常常使用XHTML 1.0而不是HTML5来轻松关闭IE的兼容模式。插入行
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
将解决调整大小的问题。将您的original demo与the fixed one进行比较。
我建议您另外修复您发布的演示中的一些其他小问题（可能与我用作原型的原始演示中存在相同的问题）。例如，应该修复多选的URL，依此类推。您将找到here的演示版的修改版本。
更新：将<meta>添加到<head>后，IE8（我之前测试过的IE9）仍然存在问题（另一个问题），你是对的。首先，您在jqGrid 4.4.3中修复了所描述的问题（请参阅the demo）。要解决jqGrid 4.4.1中的问题，您必须修改用于调整大小的代码到以下
$(window).bind("resize", function () {
var oldWidth = grid.jqGrid("getGridParam", "width"),
newWidth = $(window).width() - 20;
if (oldWidth !== newWidth) {
grid.jqGrid("setGridWidth", newWidth);
}
}).trigger("resize");