3

タスクのリストをロードするグリッドビューを含むdivのダイアログであるJQuery用のこのコードがあります。ダイアログはコンテンツに収まりますが、何百ものタスクが読み込まれると、ダイアログが大きくなりすぎて手動でサイズを変更できないため、扱いやすいサイズで開く方法をコーディングする必要がありました。

誰かがそれを提案する前に、div の max-height プロパティを 500px に設定しようとしましたが、ダイアログが 500px を超えた場合に div がダイアログ全体を埋めないことを除いて、うまくいきました。また、ダイアログに maxHeight プロパティを直接設定しようとしましたが、ダイアログが開いたときではなく、手動でダイアログのサイズを変更したときにのみ有効になります。そして、ダイアログが画面よりも大きく開くと、それはできません。

代わりに、ダイアログを宣言するこのコードを書きました。20 を超えるタスクがロードされた場合、ダイアログは高さ 500px にサイズ変更されるはずです。そうすれば、内部の div は常にダイアログを完全に埋め、ダイアログのサイズは管理可能なままになります。

function ShowReferedTasks(title, s, taskCount) {

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    });

    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        $('#litReferedTasks').dialog('option', 'height', 500);
        $('#litReferedTasks').dialog('option', 'position', 'center');
    }
}

このコードは、親グリッドビューの各行のボタンから呼び出され、各行のタスクをロードします。

ページを更新してキャッシュをフラッシュし (ctrl+F5)、いくつかのタスク リストを開くと、次のようになります。

  1. 20 を超えるタスクを含むタスクの 1 つのリスト (更新が必要なダイアログ) を開くと、問題なく動作します。

  2. タスクのリストを開いて、サイズ変更が不要なタスクが 20 未満の場合でも、それを閉じて、20 を超えるタスクを含むリストを開くと、ダイアログが開き、グリッドビューは完全に埋められますが、サイズ変更は行われません。 work、ダイアログが大きすぎて画面に収まらず、手動でサイズを変更できません。

基本的に、コードのサイズ変更部分は、ページを更新してキャッシュをフラッシュした後に開く最初のダイアログでのみ機能します。ダイアログが初めて開かれた後、何かをメモリに保持する必要があると思いますが、私は一般的にJQueryとJSの初心者であり、答えが見つかりません。

<div id="litReferedTasks" style="background-color: White; display: none; overflow:auto; height:95%;">
    <asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">        
    </asp:GridView>
    <asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>

何か助けはありますか？

4

2 に答える 2

3

ダイアログを開いた後にオプションを設定すると、高さは影響しないかもしれませんが、最初のダイアログ作成コードに高さを入れると、設定された高さがうまくいくはずです:

function ShowReferedTasks(title, s, taskCount) {

    var dialogOptions = {
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    };

    //if more than 20 refered tasks are found
    if (taskCount > 20) {        
        dialogOptions.height = 500
    }

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog(dialogOptions);
}
于 2012-08-03T20:35:41.563 に答える
2

.dialog 関数を過度に複雑にしていると思います。最も簡単な方法は、毎回ダイアログを再初期化するのではなく、autoOpen を false に設定して一度ダイアログを作成することです。次のようなもので運が良いと思います：

// Do this once when the document is ready
$(function() {  
    $('#litReferedTasks').dialog({
    autoOpen: false,
    modal: true,
    resizable: true,
    show: 'drop',
    hide: 'drop',
    width: 800,
    minHeight: 0
  });
});

function ShowReferedTasks(title, s, taskCount) {
    $('#litReferedTasks').dialog('option', 'title', 'Tâche' + s + ' référée' + s + ' de ' + title);
    if (taskCount > 20) {        
        $('#litReferedTasks').dialog('option', {
            height: 500,
            position: 'center'
        });
    }

    $('#litReferedTasks').dialog('open');
}
于 2012-08-03T20:37:17.993 に答える