本文介紹如何通過客戶端過濾WebGrid列和文本框。我們還將展示如何創建一個按鈕來調用過濾器的方法。借助于多種過濾選項和即時數據過濾功能，WebGrid提供相關搜索結果時比以往任何時候都更加快速。WebGrid包含了直觀的過濾接口，如自動過濾建議，過濾狀態指示，預定義過濾類型等等，讓用戶更有效地處理數據。由于擁有一系列完整的客戶端APIs和客戶端事件，你可以更好地控制WebGrid 處理過程，并以編程方式執行自定義操作。

在這篇文章中，您將執行以下任務：

• 新增WebGrid實例，并準備數據
• 添加HTML控件，TextBox和Button
• 實現onclick方法

新增WebGrid實例，并準備數據

新增WebGrid實例，并將WebGrid綁定到數據源

添加HTML控件，TextBox和Button

添加一個文本框，并將其命名為filterRow，并添加一個帶有onclick客戶端事件的按鈕。

<form id="form1" runat="server">
<div>
…
<input id="filterTextBox" type="text" />
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</div>
</form>

實現onclick方法

通過一下代碼設置按鈕的OnClick方法

function Button1_onclick() {
var grid = ISGetObject("WebGrid1");

// get the value of textbox
var filter = document.getElementById("filterTextBox").value;

// get the filter row
var filterRow = grid.RootTable.GetFilterRow();

// traverse to text node
// Put the filtered column name inside the GetNamedItem method
grid.RootTable.ToRowObject(filterRow).GetCells().GetNamedItem("ColumnName") = filter;

// refresh the grid
grid.Refresh();

return true;
}