EasyUI 是一款基于 jQuery 實(shí)現(xiàn)的 UI 組件庫，可以方便地構(gòu)建美觀、交互豐富的 Web 頁面。在使用 EasyUI 的過程中，我們常常需要讀取 JSON 數(shù)據(jù)，并進(jìn)行格式化展示。下面讓我們來看看如何使用 EasyUI 讀取 JSON 文件，并將其展示為可交互的表格。

$.ajax({
url:"data.json",
dataType:"json",
success: function(data){
$('#dg').datagrid({
data:data,
columns:[[
{field:'id',title:'ID',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100},
{field:'quantity',title:'Quantity',width:100},
]]
});
}
})

上面的代碼中，我們使用了 jQuery 的 AJAX 方法讀取名為 data.json 的 JSON 文件，然后使用 EasyUI 中的 datagrid 組件展示數(shù)據(jù)。其中，data 參數(shù)表示讀取到的 JSON 數(shù)據(jù)，columns 參數(shù)表示每列的名稱和寬度。通過這樣的方式，我們可以很方便地將 JSON 數(shù)據(jù)展示為可交互的表格，用戶也可以通過點(diǎn)擊表頭進(jìn)行排序等操作。

當(dāng)然，在實(shí)際開發(fā)中，我們還可以根據(jù)實(shí)際需求對數(shù)據(jù)進(jìn)行進(jìn)一步處理和展示。比如，可以通過自定義 formatter 函數(shù)，將數(shù)據(jù)進(jìn)行格式化，使其更易于閱讀。下面是一個簡單的例子：

function priceFormatter(value,row,index){
return "￥" + (value * row.quantity).toFixed(2);
}
$('#dg').datagrid({
data:data,
columns:[[
{field:'id',title:'ID',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,formatter:priceFormatter},
{field:'quantity',title:'Quantity',width:100},
]]
});

通過上面的代碼，我們將 Price 列的數(shù)據(jù)格式化為帶有人民幣符號和兩位小數(shù)的金額，用戶可以更加直觀地看到每個商品的價格和數(shù)量，并進(jìn)行快速計(jì)算。

總之，EasyUI 為我們提供了豐富的 UI 組件和便捷的 API，可以輕松地實(shí)現(xiàn)各種復(fù)雜的 Web 應(yīng)用。使用 EasyUI 讀取 JSON 數(shù)據(jù)并格式化展示，只是其中的一個小例子。相信隨著使用的深入，我們會發(fā)現(xiàn)更多有趣的技巧和用法。