jQuery jqGrid 是一個基于 jQuery 的能夠優雅又方便地展示、編輯和處理數據的插件，它可以協助我們在網頁上創建數據表格，支持多種常見數據格式，包括 XML、JSON、CSV 等，使數據展示更加直觀友好，并且 jqGrid 還支持排序、分頁、搜索等功能，讓數據操作更加方便快捷。

使用 jqGrid 開發數據展示模塊，首先需要引入必要的 JavaScript 和 CSS 文件，如下：

<link rel="stylesheet" >
<link rel="stylesheet" >
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>

接著，需要在 HTML 中定義一個具有 ID 的表格元素，這里我們使用一個具有列頭的空表格：

<table id="myGrid">
<tr>
<th>用戶 ID</th>
<th>用戶名</th>
<th>電子郵箱</th>
<th>聯系電話</th>
</tr>
</table>

我們可以在 JS 中編寫如下代碼，調用 jqGrid 的函數，設置數據源并進行數據展示。下面的例子中，我們使用了 JSON 類型的數據源：

$(function() {
$("#myGrid").jqGrid({
url: "data.json",
datatype: "json",
colModel: [
{ label: "用戶 ID", name: "id", width: 40 },
{ label: "用戶名", name: "name", width: 80 },
{ label: "電子郵箱", name: "email", width: 160 },
{ label: "聯系電話", name: "phone", width: 120 }
],
autowidth: true,
height: 200,
rowNum: 10,
pager: "#myGridPager"
});
});

在上面這段代碼中，我們使用 .jqGrid() 函數進行表格初始化，并傳入列名和列寬等信息。其中，url 屬性指定數據源地址，datatype 屬性指定數據類型，colModel 屬性定義表格的列信息，autowidth 和 height 屬性分別控制表格的寬度和高度，rowNum 屬性定義每頁顯示的行數，pager 屬性指定分頁導航欄的元素 ID。

除了以上核心屬性，jqGrid 還有許多其他設置項和事件，例如實時搜索、編輯、行間操作按鈕等，這些功能在實戰開發中非常實用。總的來說，jQuery jqGrid 是一款非常實用可靠的數據展示插件，有著豐富的功能和使用場景，值得學習和掌握。