jqGrid是一個非常流行的jQuery插件，用于創建數據網格。它可以用來展示各種類型的數據，包括表格、樹形結構、列表等。Vue.js是一個輕量級 JavaScript框架，用于構建用戶界面。使用Vue.js，您可以輕松地將數據綁定到DOM元素，并通過虛擬DOM實現快速渲染。

Vue.js與jqGrid結合使用可以創建一個強大的數據網格，可以有效地展示和管理大量數據。Vue.js提供了一種方便的方式來使用jqGrid的formatter函數，該函數用于在渲染數據時自定義數據格式。

在使用Vue.js以及jqGrid時，formatter函數可以用來格式化數據、添加超鏈接、創建圖標等。以下是一個示例代碼：

$(document).ready(function () {
var grid = $("#list");
grid.jqGrid({
url: "example.php",
datatype: "json",
colModel: [
{name: "id", index: "id", width: 55},
{name: "name", index: "name", width: 90},
{name: "amount", index: "amount", width: 80, formatter: formatAmount},
{name: "status", index: "status", width: 80, formatter: formatStatus}
]
});
function formatAmount(cellvalue, options, rowObject) {
return "$" + cellvalue.toFixed(2);
}
function formatStatus(cellvalue, options, rowObject) {
if (cellvalue === "Paid") {
return '' + cellvalue + '';
} else {
return '' + cellvalue + '';
}
}
});

在此示例中，我們創建了一個名稱為“list”的網格，并定義了四個列：id、name、amount和status。使用formatter函數對amount和status列進行格式化。formatAmount函數將數值格式化為美元形式，而formatStatus函數將根據單元格中的內容為其添加顏色。

以上是Vue.js與jqGrid結合使用的簡要介紹，以及一個使用formatter函數格式化數據的示例代碼。結合Vue.js和jqGrid可以為您的網格添加強大的數據管理功能，并為您的用戶提供一個強大而靈活的數據展示。