ASP.NET jqGrid的排序和分頁

在ASP.NET中使用jqGrid進行排序和分頁，你需要遵循以下步驟：

1. 引入必要的庫文件 首先，確保在你的項目中引入了jqGrid的JavaScript和CSS文件。你可以從官方網站下載這些文件，或者使用CDN鏈接。例如：

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.15.6/jquery.jqgrid.min.js"></script>

2. 創建一個HTML表格 在你的ASP.NET頁面中創建一個HTML表格，用于承載jqGrid數據。例如：

<table id="grid"></table>

3. 初始化jqGrid 在JavaScript代碼中，初始化jqGrid并設置相關參數。例如：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'YourDataUrl', // 替換為你的數據源URL
        datatype: 'json',
        mtype: 'GET',
        colModel: [
            { label: 'ID', name: 'Id', key: true, width: 75 },
            { label: '名稱', name: 'Name', width: 100 },
            { label: '年齡', name: 'Age', width: 80 }
        ],
        rowNum: 10, // 每頁顯示的記錄數
        rowList: [10, 20, 30], // 可選：設置每頁顯示的記錄數范圍
        pager: '#pager', // 分頁器的ID
        sortname: 'Id', // 默認排序列
        viewrecords: true, // 顯示總記錄數
        sortorder: "asc" // 默認排序順序（升序）
    });
});

4. 創建分頁器 在你的ASP.NET頁面中創建一個分頁器控件。例如：

<div id="pager"></div>

5. 處理排序和分頁事件 為了處理排序和分頁事件，你需要使用jqGrid的onSelectRow和navGrid方法。例如：

$(document).ready(function () {
    $("#grid").jqGrid({
        // ... 其他參數 ...
        onSelectRow: function (rowid) {
            // 當選中某一行時，你可以在這里處理相關操作
            console.log("選中的行ID: " + rowid);
        },
        navGrid: '#pager', // 初始化分頁器
        // ... 其他參數 ...
    });

    // 配置分頁器按鈕
    $("#pager").jqGrid('navGrid', '#pager', {
        edit: false, // 是否允許編輯
        add: false, // 是否允許添加
        del: false, // 是否允許刪除
        search: true, // 是否允許搜索
        refresh: true, // 是否允許刷新
        view: false, // 是否允許查看
        position: "left", // 分頁器按鈕的位置
        cloneToTop: true, // 是否將分頁器克隆到頂部
        addfunc: function () {
            // 添加新行的操作
            console.log("添加新行");
        },
        delfunc: function () {
            // 刪除行的操作
            console.log("刪除行");
        }
    });
});

現在，你已經成功地在ASP.NET中使用了jqGrid進行排序和分頁。當然，你可以根據需要對這些功能進行進一步的定制。更多關于jqGrid的信息和示例，請參考官方文檔：https://www.trirand.com/blog/