3

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

在任何人建议之前，我尝试将我的 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');
    }
}

此代码从父 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>

有什么帮助吗？

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 回答