javascript - Jquery 对话框调整大小仅在第一次打开时发生

Question

我有一个 JQuery 的代码，一个 div 的对话框，其中包含一个加载任务列表的 gridview。对话框适合内容，但如果加载数百个任务，对话框会变得太大，无法手动调整大小，因此我需要编写一种方法，使其以可管理的大小打开。

在有人建议之前，我尝试将我的 div 上的 max-height 属性设置为 500px 并且效果很好，但如果对话框高于 500px，div 将不会填充整个对话框，我们想要它。 我还尝试直接在对话框上设置 maxHeight 属性，但这仅在您手动调整对话框大小时生效，而不是在对话框打开时生效。并且当对话框打开时比无法完成的屏幕大。

所以我改为编写声明对话框的代码，然后如果加载了超过 20 个任务，对话框应该调整为 500 像素高。这样，内部的 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');
    }
}

此代码从父 gridview 的每一行中的一个按钮调用，加载每一行的任务。

这是我刷新页面并刷新缓存 (ctrl+F5)，然后打开一些任务列表时发生的情况。

1. 如果我打开一个包含超过 20 个任务的任务列表(一个需要刷新的对话框)，它工作正常。

2. 如果我打开任何任务列表，即使是少于 20 个不需要调整大小的任务，然后关闭它，然后打开一个包含 20 个以上任务的列表，对话框打开并且 gridview已完美填充，但调整大小不起作用，对话框太大，无法在屏幕上显示，并且无法手动调整大小。

基本上，我的代码的调整大小部分仅适用于我在刷新页面和刷新缓存后打开的第一个对话框。我认为在第一次打开对话框后必须将某些东西保存在内存中，但我一般是 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>

有什么帮助吗？

Answer 1

好的，所以如果您在对话框打开后设置选项，高度可能不会产生影响，但如果您将高度放入初始对话框创建代码中，它应该有一个设置的高度就好了:

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);
}