1

我有一个简单的搜索表单，它启动一个 jQuery UI 对话框，其中包含 5 个 jQuery UI 选项卡，每个选项卡都包含自己的 jqgrid。删除呈现网格的 javascript 会导致滚动条消失。更改网格的宽度没有效果。

正如您从屏幕截图中看到的那样，出现水平滚动条，这会导致出现垂直滚动条。

我正在使用 jquery 1.7.2、jqueryui 1.8.22、jqgrid 4.4.0 和 Internet Explorer 8.0

呸呸呸

我像这样通过ajax加载对话框

    function LoadDialog(id) {
        $('#myPopup').dialog({
            height: 800,
            width: 1100,
            autoOpen: false,
            open: function (event, ui) {
                $('#myPopup').html('');
                $.ajax(
                    '<%: Url.Action("loadDetails") %>/' + id,
                    {
                        success: function (data) {
                            $('#myPopup').html(data);
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            DisplayMessage(textStatus, errorThrown);
                        }
                    }
                );
            }
        });
        $('#myPopup').dialog('open');
    }

loadDetails 操作方法返回此视图

<div id="contentWrapper">
    <div id="details"></div>
    <div id="tabs">
        <ul>
            <li><%: Html.ActionLink("tab1") %></li>
            <li><%: Html.ActionLink("tab2") %></li>
            <li><%: Html.ActionLink("tab3") %></li>
            <li><%: Html.ActionLink("tab4") %></li>
            <li><%: Html.ActionLink("tab5") %></li>
    </div>
<div>

有了这个脚本

<script type="text/javascript">
$('#tabs').tabs({
    cache: true,
    ajaxOptions: {
        cache: true
    }
});
</script>

每个选项卡为 jqgrid 加载一个表格和一个 div，并使用适当的 javascript 加载网格，它们的宽度设置为 1000px。

<table id="gridtableX'></table><div id="griddivX"></div>
<script type="text/javascript">
$('#gridtableX').jqGrid({
    url: '/Home/GetGridData/1234',
    datatype: 'json',
    height: 320,
    colNames: ['Col1','Col2','Col3','Col4'],
    colModel: [
        {name:'Col1',width:30,sortable:false},
        {name:'Col2',width:40,sortable:false}, 
        {name:'Col3',width:40,sortable:false}, 
        {name:'Col4',width:40,sortable:false}],
    rowNum:4,
    width:1000,
    scrollOffset:0,
    hidegrid: false,
    viewrecords: true,
    hoverrows: false,
    beforeSelectRow: function(rowid, e){ return false; },
    pager: '#griddivX'}).navGrid('#griddivX',{edit:false,add:false,del:false});
</script>

我目前正在研究一个简单的示例，但这需要一段时间。如果有人以前遇到过这种情况，请告诉我。这是什么原因造成的，我该如何解决？

4

2 回答 2

4

这是一个有趣的问题！您能否发布可用于检查问题的 URL？

我想，问题的原因可能是jqGrid 4.4.0 中引入的cellWidth函数。只是为了测试，您可以修改代码cellWidth并包含该行

if ($.browser.msie) { return false; }

代码开头的某处cellWidth。在这种情况下，不会创建具有 10000px 的 div left:10000px。或者，您可以尝试使用 来修改left:10000px或left:-10000px进行一些其他实验。另外，我建议您阅读作为功能引入起源的答案cellWidth。

于 2012-08-14T18:34:19.237 回答
0

感谢奥列格的回答，我能够解决这个问题。为了便于维护，我在我的项目中添加了一个新的 javascript 文件，并将其包含在我之后jquery.jgGrid.js

$.jgrid.cellWidth = function () {
    var $testDiv = $("<div class='ui-jqgrid' style='position:absolute;left:-1000px;top:-1000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
    testCell = $testDiv.appendTo("body")
        .find("td")
        .width();
    $testDiv.remove();
    return 5 !== testCell;
}
于 2012-08-29T22:51:01.430 回答