Jqgrid-window.bind事件不允许在IE8中调整列大小 [英] Jqgrid - window.bind event does not allow column resizing in IE8
问题描述
对于IE8中的Jqgrid，当我将调整大小事件绑定到窗口时，列大小调整不起作用.当我单击以调整大小的列时，它显示了调整大小的符号，但没有执行任何操作.我当前使用的是jqgrid 4.4.1版本，当我将4.1.2用于相同的代码时，我没有出现此问题.我必须使用4.4.1版本才能具有子网格，将支持分组在一起，因此现在不能恢复到4.1.2版本.有没有解决此问题的方法?任何帮助是极大的赞赏.预先感谢..
For Jqgrid in IE8, column resizing is not working when I bind a resize event to the window. When I click on a column to resize, it shows resize sign but does not do anything. I am currently using jqgrid 4.4.1 version, I did not have this issue when I was using 4.1.2 for the same code. I have to use 4.4.1 version to have subgrid, grouping support together so cannot revert to 4.1.2 version now. Is there a way to fix this issue? Any help is greatly appreciated. Thanks in advance..
我也没有在FF/chrome中看到此问题，而仅在IE8中看到
Also I do not see this issue in FF/chrome but only in IE8.
基本上，以下代码段引起了该问题，如果我注释掉了此代码列，则调整大小可以解决任何问题，但是当调整浏览器大小时，我无法调整网格宽度:(
Basically the following code snippet is causing the issue, if I comment out this code column resizing works with out any issue but I cannot resize grid width when browser is resized :(
$(window).bind('resize', function() {
grid.setGridWidth($(window).width() - 20);
}).trigger('resize');
以下是重现此问题的完整代码.
Following is the complete code to reproduce this issue..
<!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>
推荐答案
您描述的问题的原因是Internet Explorer的兼容模式.顺便说一下，我过去使用XHTML 1.0代替HTML5只是为了轻松关闭IE的兼容模式.插入行
The reason of the problem which you describes is compatibility mode of Internet Explorer. By the way I used to use XHTML 1.0 instead of HTML5 only to make easy to switch off the compatibility mode of IE. Inserting of the line
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
将解决调整大小的问题.将您的原始演示与
will solve the problem of resizing. Compare your original demo with the fixed one.
我建议您另外修复发布的演示中的一些其他小问题(可能在您用作原型的原始演示中也存在相同的问题).例如，应该修复multiselect的URL，等等.您可以在此处找到该演示的修改版本.
I recommend you additionally fix some other small problems from the demo which you posted (probably the same problems exist in my original demo which you used as prototype). For example one should fix the URL of multiselect and so on. The modified version of the demo you will find here.
更新:您很正确，将<meta>添加到<head>之后，IE8(不是我之前测试过的IE9)仍然存在问题(另一个问题).首先，您描述的问题已在jqGrid 4.4.3中得到解决(请参见该演示).要解决jqGrid 4.4.1中的问题，您必须修改代码以将其调整为以下大小
UPDATED: You are right that IE8 (not IE9 where I tested before) still have a problem (another problem) after adding <meta> to the <head>. First of all the problem which you describes are fixed in jqGrid 4.4.3 (see the demo). To fix the problem in jqGrid 4.4.1 you have to modify the code for resizing to the following
$(window).bind("resize", function () {
var oldWidth = grid.jqGrid("getGridParam", "width"),
newWidth = $(window).width() - 20;
if (oldWidth !== newWidth) {
grid.jqGrid("setGridWidth", newWidth);
}
}).trigger("resize");
请参见相应的演示.
这篇关于Jqgrid-window.bind事件不允许在IE8中调整列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
