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

Question

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

当我在配方的网格中选择一行时，我会在另一个div的另一个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”过滤，如果，说，巧克力派的配方与山核桃派的配方有关，而用户之前通过过滤“山核桃”过滤到山核桃饼，我的过滤器不会显示该巧克力派，因为它没有山核桃糖。让感觉我想我想要完成的任务如下：？

• 点击文本
• 过滤器是c- leared。
• 食谱名称会自动填入适当的过滤框。
• 与此至少有一半自动选择主要有过滤的行（原离开了这个关）

我。如果您有关于如何触发该过滤器并清除其他过滤器的一些指导，我将非常感激。

---

跟帖：

我修改的功能如下：

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

，这将确实如下面奥列格回答，请筛选给定的相关配方。接下来我想自动选择它。我尝试在我的第二个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').val(...)之后立即致电$('#gs_RecipeName').trigger('change')，则可以在搜索工具栏中找到该值。如果您使用searchOnEnter: false它应该是足够的。如果您决定使用searchOnEnter: true，则需要添加triggerToolbar方法（$("#grid_id")[0].triggerToolbar()）的呼叫。

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