Jquery Jqgrid-window.bind事件不允许在IE8中调整列大小_Jquery_Jqgrid

Jquery Jqgrid-window.bind事件不允许在IE8中调整列大小

jquery jqgrid

Jquery Jqgrid-window.bind事件不允许在IE8中调整列大小,jquery,jqgrid,Jquery,Jqgrid,对于IE8中的Jqgrid，当我将调整大小事件绑定到窗口时，列大小调整不起作用。当我点击一列来调整大小时，它会显示调整大小标志，但不会做任何事情。我目前使用的是jqgrid 4.4.1版本，当我对同一代码使用4.1.2时，我没有这个问题。我必须使用4.4.1版本才能拥有子网格，将支持分组在一起，因此现在无法恢复到4.1.2版本。有没有办法解决这个问题？非常感谢您的帮助。提前谢谢此外，我在FF/chrome中没有看到这个问题，只有在IE8中看到基本上，以下代码段是导致问题的原因，如果我注释掉此

对于IE8中的Jqgrid，当我将调整大小事件绑定到窗口时，列大小调整不起作用。当我点击一列来调整大小时，它会显示调整大小标志，但不会做任何事情。我目前使用的是jqgrid 4.4.1版本，当我对同一代码使用4.1.2时，我没有这个问题。我必须使用4.4.1版本才能拥有子网格，将支持分组在一起，因此现在无法恢复到4.1.2版本。有没有办法解决这个问题？非常感谢您的帮助。提前谢谢

此外，我在FF/chrome中没有看到这个问题，只有在IE8中看到

基本上，以下代码段是导致问题的原因，如果我注释掉此代码列，则调整大小不会产生任何问题，但在调整浏览器大小时，我无法调整网格宽度：(

以下是复制此问题的完整代码

<!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的兼容模式。插入行

将解决调整大小的问题。请与进行比较

我建议您另外修复您发布的演示中的一些其他小问题（可能与您用作原型的我的原始演示中存在的问题相同）。例如，您应该修复multiselect的URL等等。您将找到演示的修改版本

已更新：在将

添加到

后，IE8（而不是我之前测试的IE9）仍然存在问题（另一个问题）是正确的。首先，您描述的所有问题在jqGrid 4.4.3中都已修复（请参阅）。要修复jqGrid 4.4.1中的问题，您必须修改代码以调整大小，如下所示

$（窗口）。绑定（“调整大小”，函数（）{
var oldWidth=grid.jqGrid（“getGridParam”，“width”），
newWidth=$（窗口）.width（）-20；
如果（旧宽度！==新宽度）{
jqGrid（“setGridWidth”，newWidth）；
}
}).触发（“调整大小”）；

请参阅。

您描述的问题的原因是Internet Explorer的兼容模式。顺便说一下，我过去使用XHTML 1.0而不是HTML5只是为了方便关闭IE的兼容模式。插入行

将解决调整大小的问题。请与进行比较

已更新：在将

添加到

$（窗口）。绑定（“调整大小”，函数（）{
var oldWidth=grid.jqGrid（“getGridParam”，“width”），
newWidth=$（窗口）.width（）-20；
如果（旧宽度！==新宽度）{
jqGrid（“setGridWidth”，newWidth）；
}
}).触发（“调整大小”）；

请参阅。

非常感谢您的快速回复。我在IE8中尝试了我们的固定解决方案，但仍然不起作用。它似乎第一次起作用，但之后又冻结了列大小调整。我在应用程序src代码中尝试了此标记，但没有放入演示代码。@varaprakash:不客气！我发现IE8中还有一个问题结束或调整大小。这个问题在jqGrid 4.4.1中存在，但在jqGrid 4.4.3中已经解决了：看看哪里jqGrid 4.4.1被替换为jqGrid 4.4.3。@varaprakash:我又更新了一次我的答案。请看更新的部分。你一如既往的帮助和优秀。它现在工作得很好。再次感谢你的快速回复。我试过了我们在IE8中的固定解决方案，但仍然不起作用。它似乎第一次起作用，但之后又冻结了列大小调整。我在我的应用程序src代码中尝试了此标记，但没有放入演示代码。@varaprakash:不客气！我发现IE8在结尾或调整大小时还有一个问题。问题存在于jqGrid 4.4.1中，但它已经在jqGrid 4.4.3中修复了：看看哪里jqGrid 4.4.1被替换为jqGrid 4.4.3。@varaprakash:我又更新了一次我的答案。请看更新的部分。你一如既往地非常有帮助和优秀。现在它工作得很好。再次感谢。。

<!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>