如何记住 jqrid 高级搜索对话框的大小和在本地存储中的位置

Question

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 演示中，对话框标题可以移动到浏览器窗口之外。之后对话框不再可移动。如何解决这个问题？

Answer 1

我觉得你的问题很有趣。所以下面你会发现一个可能的实现。

可以将您的问题分为两部分：1）在使用recreateFilter: true的情况下，在多次打开期间保存搜索对话框的宽度2）保存localStorage内部的宽度。

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

所以我在下面解释一下在使用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);

可以看对应的demohere。

更新：要保存搜索对话框的位置和宽度，需要将$.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 选项将被额外保存。修改后的demo是here。