1

それぞれ独自の jqgrid を含む 5 つの jQuery UI タブを含む jQuery UI ダイアログを起動する単純な検索フォームがあります。グリッドをレンダリングする 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>

各タブは、適切な JavaScript を使用して jqgrid のテーブルと div をロードし、グリッドをロードします。それらの幅は 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 の divleft:10000pxが作成されない場合。または、変更left:10000pxを加えleft:-10000pxたり、他の実験を行ったりするために使用することもできます。さらに、関数の導入の元となった回答を読むことをお勧めしますcellWidth。

于 2012-08-14T18:34:19.237 に答える
0

Oleg の回答のおかげで、問題を解決できました。メンテナンスを容易にするために、新しい 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 に答える