1

jqgrid 高级搜索对话框窗口的大小和位置可以通过鼠标更改。

这些更改不会被记住。下次打开，显示默认大小和位置。

如何保存和恢复它，可能使用本地存储。在重新搜索之前，还应检查如果屏幕分辨率或大小发生变化，搜索对话框的一部分是否可见。

更新

我也尝试使用下面的代码扩展 Oleg 答案以保存/恢复窗口位置。搜索窗口恢复到与最初不同的位置。看起来使用下面的代码检索的 left 和 top 值是错误的。如何恢复位置呢？

var oldJqDnRstop, searchParams = { width: 550, left: 5, top: 5 };
if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id");
        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string" && dialogId.substr(0, 14) === "searchmodfbox_") {
            // save the dialog position here
            // we save "width" option as the property of searchParams object
            // used as parameter of navGrid
            searchParams.width = $dialog.width();
            searchParams.left  = $dialog.offset().left;
            searchParams.top  = $dialog.offset().top;
            saveWindowState();
        }
    };
}

更新2

在 Oleg 演示中，对话框标题可以移动到浏览器窗口之外。之后对话框不再可移动。如何解决这个问题？

在此处输入图像描述

4

1 回答 1

1

我觉得你的问题很有趣。因此，您将在下面找到一个可能的实现。

可以将您的问题分为两部分：1）在多次打开期间保存搜索对话框的宽度以防使用recreateFilter: true2）保存localStorage.

如果您已经使用，第二部分相对容易localStorage。您只需使用一个附加参数扩展已保存的状态。确切的实现在某种程度上取决于如何localStorage实现储蓄。在答案中，我展示了如何使用getItem和setItem方法window.localStorage来实现保存在localStorage. 或者，如果您需要另外支持 IE6/IE7 等旧 Web 浏览器，则可以使用非常实用的jStorage 。

所以我在下面解释如何在多次打开的情况下保存搜索对话框的宽度以备不时之需recreateFilter: true。

我建议“子类化”该方法$.jqDnR.stop，因为没有回调将在对话框调整大小结束时使用。相应的代码可能如下所示

var oldJqDnRstop, searchParams = { width: 450 };

if ($.jqDnR) {
    oldJqDnRstop = $.jqDnR.stop; // save original function
    $.jqDnR.stop = function (e) {
        var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id");
        oldJqDnRstop.call(this, e); // call original function
        if (typeof dialogId === "string" && dialogId.substr(0,14) === "searchmodfbox_") {
            // save the dialog position here
            // we save "width" option as the property of searchParams object
            // used as parameter of navGrid
            searchParams.width = $dialog.width();
        }
    };
}

// create the grid
$grid.jqGrid({
    ....
});

// create navigator with "Search" button where searchParams object
// will be used as parameter
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false},
    {}, {}, {}, searchParams);

您可以在此处查看相应的演示。

更新：要保存搜索对话框的位置和宽度，需要将新实现的代码扩展$.jqDnR.stop到以下

$.jqDnR.stop = function (e) {
    var $dialog = $(e.target).parent(), dialogId = $dialog.attr("id"), position;
    oldJqDnRstop.call(this, e); // call original function
    if (typeof dialogId === "string" && dialogId.substr(0,14) === "searchmodfbox_") {
        // save the dialog position here
        searchParams.width = $dialog.width();
        position = $dialog.position();
        searchParams.left = position.left;
        searchParams.top = position.top;
    }
};

在上面的代码中，left和top选项将被额外保存。修改后的演示在这里。

于 2012-12-01T19:52:05.210 回答