jqGrid是jQuery的一個插件，用于創(chuàng)建各種類型的數(shù)據(jù)表格。它經(jīng)常用于創(chuàng)建與RESTful API的交互，因為它對Ajax支持的友好性。

其中的filter功能可以讓我們在表格中的數(shù)據(jù)中篩選出符合條件的行。jqGrid filter使用的是jQuery UI Dialog組件來呈現(xiàn)過濾器，因此您需要將其包含在您的HTML代碼中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

使用filter功能初始化jqGrid：

$("#grid").jqGrid({
url: "https://api.example.com/data",
datatype: "json",
colModel: [
{ label: "ID", name: "id", width: 75 },
{ label: "Name", name: "name", width: 150 },
{ label: "Age", name: "age", width: 150 },
],
rowNum: 10,
pager: "#pager",
loadonce: true,
sortable: true,
sortorder: "asc",
viewrecords: true,
width: 780,
height: 250
}).jqGrid("filterToolbar", {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});

在上面的代碼片段中，我們設置了許多很方便的功能，如翻頁、排序、默認搜索等。但是在初始化中調(diào)用filterToolbar函數(shù)是啟用篩選器功能的關鍵。

為了看到應用的效果，您需要在瀏覽器中運行代碼，它應該已經(jīng)抓取了數(shù)據(jù)并在新的表格中呈現(xiàn)它們。如果您要使用篩選器，則必須在Name列中使用字符串搜索。另外，開啟stringResult參數(shù)可以將搜索條件保存為一個字符串而不是一個表單元素的值。