在过滤器框中设置文本后，让jqGrid自动过滤 [英] Getting jqGrid to auto-filter once I set the text in the filter box

问题描述

对于我的第一个ASP.NET MVC 3应用程序，我使用jqGrid来显示与配方有关的表格数据.用户可以关联一个或多个食谱.

For my first ASP.NET MVC 3 application I use the jqGrid to display tabular data related to recipes. One or more recipes can be related by the user.

当我在菜单中为某个食谱选择一行时，我会在另一个div中在其下方显示有关该食谱的一些详细信息，包括相关食谱的名称.

When I select a row in the grid for a recipe I display some detail about that recipe below it in another div, including the names of related recipes.

如果我突出显示/复制了相关配方的名称，则可以将其粘贴到配方"名称的过滤器框中，然后将其过滤为该配方.我想做的是显示每个相关配方的链接，然后，当用户单击其中一个相关配方时，从本质上讲，它们的作用等同于突出显示/复制/粘贴.

If I highlight/copy the name of a related recipe I can paste it into the filter box for the Recipe name and it will filter down to that recipe. What I'd like to do is display a link for each related recipe and then when the user clicks on one of the related recipes, it would essentially do the equivalent of the highlight/copy/paste for them.

对于我的每个食谱名称，我都做了这样的事情:

For each of my recipe names I did something like this:

<a size="75" class="relatedrecipe" data-recipename="@item.RecipeName">@item.RecipeName</a>

然后我有一些执行此操作的jQuery:

And then I have some jQuery that does this:

$(function () {
   $('.relatedrecipe').click(function () {
      $('#gs_RecipeName').val($(this).data('recipename'));
   });
}

实际上，这将使用我相关配方的名称填充该输入框(标识为"gs_RecipeName")，但此时并不会自动过滤配方列表.为了使其正常工作，我必须单击框并更改文本以触发它.

And this will, in fact, populate that input box (with the id "gs_RecipeName") with the name of my related recipe, but it doesn't auto-filter the recipe list at that point. To get it to work, I've got to click in the box and change the text to trigger that.

第二个问题 解决第一个问题后，我想清除所有可能设置的现有过滤器(首先使我进入了原始配方.我执行"AND"过滤，如果说例如Chocolate Pie的配方与一份针对山核桃派的食谱，而用户之前通过在山核桃"上进行过滤而过滤到了山核桃派，我的过滤器将不会显示该巧克力派，因为其中没有山核桃.要完成的工作如下:

Second issue After solving the first issue, I want to clear all the existing filters that might be set (which got me to the original recipe in the first place. I do "AND" filtering and if, say, a recipe for Chocolate Pie is related to a recipe for Pecan Pie and the user had previously filtered down to the Pecan Pie by filtering on "Pecan", my filter won't display that Chocolate Pie since it doesn't have pecans in it. Make sense? I guess what I want to accomplish is the following:

• 单击文本.
• 已清除过滤器.
• 食谱名称会自动填写在相应的过滤器框中.
• 自动选择过滤后的行(最初未选中)

• Clicks the text.
• Filters are cleared.
• Recipe name is auto-filled in appropriate filter box.
• Auto-select the filtered row (left this off originally)

我大部分都在那里，至少有一半.如果您对如何触发该过滤器和清除其他过滤器有了一些指导，希望能听到有关它的信息.

I'm mostly there with at least half of this. If you've got some guidance on how to trigger that filter and clear the others, I'd appreciate hearing about it.

后续行动:

我修改了我的功能，如下所示:

I modified my function as follows:

$(function () {
   $('.relatedrecipe').click(function () {
      var recipe = $(this).data('recipename');
      setTimeout(function () {
         $("#recipegrid")[0].clearToolbar();
      }, 50);
      setTimeout(function () {
         $('gs_RecipeName').val(recipe);
         $("#recipegrid")[0].triggerToolbar();
      }, 200);
   });
}

确实如此，正如奥列格(Oleg)在下面回答的那样，过滤到给定的相关配方.接下来，我想自动选择它.我尝试在上面的第二个setTimeout块中添加以下内容.

and this will indeed, as Oleg answered below, filter down to the given related recipe. Next I wanted to select it automatically. I tried adding the following inside my second setTimeout block above.

var firstRowID = $('#recipegrid').getDataIds()[0];
$('#recipegrid').setSelection(firstRowId, true);

正如在SO上其他地方提到的那样，它是选择行的一种方法，但这是行不通的.

as was mentioned elsewhere on SO as a means of selecting the row, but that doesn't work.

自动选择的解决方案:

我修改了一下代码，此方法有效:

I modified my code a bit and this works:

$(function () {
   $('.relatedrecipe').click(function () {
      // store off the value of the related recipe I want to switch to
      var recipe = $(this).data('recipename');
      // clear any filters on the grid
      setTimeout(function () {
         $("#recipegrid")[0].clearToolbar();
         // set the recipe filter to the related recipe name and trigger the filtering
         setTimeout(function () {
            $('#gs_RecipeName').val(recipe);
            $('#recipegrid')[0].triggerToolbar();
            // auto-select the first row
            setTimeout(function () {
               var firstRowID = $('#recipegrid').jqGrid('getDataIds')[0];
               $('#recipegrid').setSelection(firstRowId, true);      
            }, 50);
         }, 50);
      }, 50);
   });
}

推荐答案

我想如果您在$('#gs_RecipeName').val(...)之后立即调用$('#gs_RecipeName').trigger('change')，将解决在搜索工具栏中设置值的问题.如果使用searchOnEnter: false，就足够了.如果决定使用searchOnEnter: true，则需要添加 triggerToolbar 方法($("#grid_id")[0].triggerToolbar()).

I suppose that you will solve the problem with setting of the value in the searching toolbar if you call $('#gs_RecipeName').trigger('change') immediately after $('#gs_RecipeName').val(...). If you use searchOnEnter: false it should be enough. If you decide to use searchOnEnter: true you will need to add call of triggerToolbar method ($("#grid_id")[0].triggerToolbar()).

要清除搜索工具栏并刷新网格，可以使用 clearToolbar 与triggerToolbar相同.

To clear the searching toolbar and refreshing the grid you can use clearToolbar in the same way as triggerToolbar.

这篇关于在过滤器框中设置文本后，让jqGrid自动过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！