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

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

UPDATE2

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

Answer 1

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

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

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

所以我在下面解释在使用localStorage的情况下如何在多次打开期间保存搜索对话框的宽度。

我建议“继承”方法recreateFilter: true，因为没有回调将在对话框重新调整大小时使用。相应的代码可能如下所示

$.jqDnR.stop

您可以看到相应的演示here。

更新：要保存搜索对话框的位置以及宽度，需要将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选项。修改后的演示版为here。