Question

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

在任何人建议之前，我尝试将我的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），然后打开一些任务列表时会发生什么。

如果我打开一个包含20个以上任务的任务列表（一个需要刷新的对话框），就可以正常工作。
如果我打开任何任务列表，即使任务少于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);
}

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

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

2 个答案: