2012-05-29 159 views
0

我创建了一个网站,并有一个jqGrid的我的网页上。我正在使用高级搜索功能,通过向我的navgrid(pager)添加一个自定义按钮来调用jqGrid的'searchGrid'函数。jqGrid的高级搜索 - 保存搜索

$('#My_Grid_Id').jqGrid(settingsObject) 
.navGrid('My_Grid_Id_toolbar1',{del:false,add:false,edit:false,refresh:false,search:false}) 
.navButtonAdd('My_Grid_Id_toolbar1', 
{ 
    caption: 'Search', 
    buttonicon: 'ui-icon-search', 
    title: 'Search', 
    onClickButton: function() { 
     $(gridSelector).jqGrid ('searchGrid', { 
      caption: 'Search', 
      multipleSearch:true, 
      overlay: false, 
      multipleGroup:true, 
      recreateFilter: true 
     }); 
    } 
}); 

我希望能够保存搜索设置的用户离开该页面后这样我就可以重新加载它们,当用户返回。我几乎有一个工作解决方案,但是在保存并重新加载搜索设置后,搜索对话窗口上的“重置”按钮无法按预期工作。搜索设置似乎在后台重置,但窗口不刷新,网格仍显示旧的结果。

要解释一点。我通过使用ajax调用将potdata.filters参数发送到服务器来捕获窗口卸载事件并存储搜索设置。然后我将数据存储在一个可以稍后加载的cookie中。

$(window).unload(function() { 
    $.ajax({ 
     type: "POST", 
     url: saveUrl, 
     dataType: 'json', 
     traditional: true, 
     async: false, 
     data: { 
      searchSettings: $('#My_Grid_Id').getGridParam('postData').filters  
     } 
    }); 
}); 

当我重装检查我的cookie有一个值,然后将保存的过滤器放回在构造函数中网格栅。

postData: { 
    filters: mySavedSearchSettings     
}, 

在这一点上,网格运行良好,搜索已保存,结果如预期显示。当我打开搜索窗口对话框时,搜索选项按预期显示。但是当我点击'重置'按钮时,窗口没有正确更新,网格结果也没有。我试图添加一个onclick事件到重置按钮手动重置搜索,但似乎没有发生。

afterShowSearch: function() { 
    $('.fm-button-icon-left').click(function(){ 
     $('#My_Grid_Id').jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid"); 
    }); 
} 

任何人都可以提供任何帮助吗?我觉得我很接近,我只需要重新设置搜索窗口然后重新加载网格。

+0

不复位按钮复位设置? – PitaJ

+0

我对卸载时发生的异步调用有点警惕。你确定这些设置总是保存到cookie中吗?如果您对重置按钮的使用方法没有吸引力,我可能会提出一个激进的想法:每次更改时保存设置,而不仅仅是在卸载时。 –

+0

保存设置似乎不成问题。 Cookie始终正确创建,并且网格始终加载保存的搜索。当我点击重置按钮时,似乎没有任何事情发生。但是,如果我然后离开页面并返回搜索已被重置。所以就好像postData过滤器被清除,但搜索窗口和网格实际上并未刷新。 –

回答

1

答案竟然是两件事情。

首先,电网不重新加载正确的数据,因为我没有正确处理服务器端代码。我最近开始使用PHP,并且我有一个代码没有正确识别过滤器发布数据为空/空的错误。

其次,我能够通过调用“searchGrid”功能再次打开它重置搜索窗口对话框。所以显示在搜索后,我就点击事件添加到复位按钮,如下所示: -

$(gridSelector).navButtonAdd(gridSelector + '_toolbar1', 
    { 
     caption: 'Search', 
     buttonicon: 'ui-icon-search', 
     title: 'Search', 
     onClickButton: function() { OpenAdvancedSearchDialog(gridSelector); } 
    }); 
} 

function OpenAdvancedSearchDialog(gridSelector) { 
    $(gridSelector).jqGrid ('searchGrid', { 
     caption: 'Search', 
     multipleSearch:true, 
     overlay: false, 
     multipleGroup:true, 
     recreateFilter: true, 
     afterShowSearch: function() { 
      $('.fm-button-icon-left').click(function(){ 
       OpenAdvancedSearchDialog(gridSelector); 
      }); 
     } 
    }); 
}