在設置過濾器框中的文本後，讓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。