Question

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

当我在网格中为配方选择一行时，我会在另一个div中显示有关该配方的一些详细信息，包括相关配方的名称。

如果我突出显示/复制相关配方的名称，我可以将其粘贴到配方名称的过滤器框中，它将过滤到该配方。我想要做的是显示每个相关配方的链接，然后当用户点击其中一个相关配方时，它基本上相当于它们的高亮/复制/粘贴。

对于我的每个食谱名称，我做了类似的事情：

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

然后我有一些jQuery这样做：

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

事实上，这将填充输入框（ID为“gs_RecipeName”），其中包含我的相关配方的名称，但它不会在此时自动过滤配方列表。为了使它工作，我必须在框中单击并更改文本以触发它。

第二期 在解决了第一个问题之后，我想要清除所有可能设置的现有过滤器（首先让我进入原始配方。我做“AND”过滤，如果，例如，巧克力派的配方与Pecan Pie的配方和用户之前通过过滤“Pecan”过滤到Pecan Pie，我的过滤器不会显示那个巧克力派，因为它里面没有山核桃。有意义吗？我想我想要的是什么要完成的是：

点击文字。
过滤器已清除。
配方名称会在相应的过滤框中自动填充。
自动选择已过滤的行（最初将其关闭）

我在这里至少有一半。如果你有关于如何触发过滤器并清除其他过滤器的一些指导，我会很感激听到它。

跟进：

我修改了我的功能如下：

$(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块中添加以下内容。

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

正如在其他地方提到的SO作为选择行的一种方法，但这不起作用。

自动选择的解决方案：

我修改了我的代码，这有效：

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

Answer 1

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

要清除搜索工具栏并刷新网格，您可以使用与triggerToolbar相同的方式使用clearToolbar。

在过滤器框中设置文本后，让jqGrid自动过滤

1 个答案: