ASP.NET jqGrid的篩選和搜索

ASP.NET jqGrid 是一個基于 jQuery 的網格控件，用于在網頁上顯示和操作數據。它提供了強大的篩選和搜索功能，幫助用戶快速找到所需的信息。以下是如何在 ASP.NET 中使用 jqGrid 實現篩選和搜索的方法：

1. 引入必要的庫文件

首先，確保在項目中引入了 jQuery、jqGrid 和相關插件的庫文件。在 HTML 頁面的 head 部分添加以下代碼：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.15.4/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.15.4/jquery.jqgrid.min.js"></script>

2. 創建 jqGrid

在 HTML 頁面的 body 部分創建一個 div 元素，用于存放 jqGrid：

<div id="grid"></div>

3. 初始化 jqGrid

在 JavaScript 代碼中，使用以下代碼初始化 jqGrid：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'your_data_source_url', // 數據源 URL
        datatype: 'json', // 數據類型
        colModel: [
            { label: '列1', name: 'column1', key: true },
            { label: '列2', name: 'column2' },
            // 其他列配置
        ],
        rowNum: 10, // 每頁顯示的行數
        rowList: [10, 20, 30], // 可選行數列表
        pager: '#pager', // 分頁器元素 ID
        sortname: 'column1', // 默認排序列
        viewrecords: true, // 顯示記錄總數
        multiselect: false, // 是否允許多選
        loadComplete: function (data) {
            // 數據加載完成后執行的回調函數
        }
    });
});

4. 添加篩選和搜索框

為了實現篩選和搜索功能，需要在 jqGrid 中添加一個過濾工具欄?？梢允褂靡韵麓a添加：

$("#grid").jqGrid('filterToolbar', {
    search: true, // 啟用搜索框
    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], // 搜索選項
    groupOp: ['AND', 'OR'], // 組操作符
    add: true, // 添加搜索條件按鈕
    edit: true, // 編輯搜索條件按鈕
    del: true, // 刪除搜索條件按鈕
    searchOnEnter: false, // 是否在按下 Enter 鍵時觸發搜索
    reset: true // 重置搜索條件按鈕
});

現在，你已經成功地在 ASP.NET jqGrid 中實現了篩選和搜索功能。用戶可以通過搜索框和過濾工具欄中的選項快速找到所需的信息。