EasyUI是一個簡單易用但功能強大的JavaScript框架，其中的datagrid組件可以用于展示數(shù)據(jù)表格。datagrid要展示數(shù)據(jù)需要提供數(shù)據(jù)源，如從后端API獲取的JSON格式的數(shù)據(jù)。下面以一個例子來說明如何將JSON數(shù)據(jù)渲染到EasyUI表格中。

// 示例JSON數(shù)據(jù)
var data = {
"total": 3,
"rows": [
{"id":1, "name":"張三", "age":23},
{"id":2, "name":"李四", "age":28},
{"id":3, "name":"王五", "age":20}
]
};
// EasyUI表格配置
$('#table').datagrid({
columns: [[
{field:'id', title:'ID', width:50},
{field:'name', title:'姓名', width:100},
{field:'age', title:'年齡', width:50},
]],
data: data['rows'], // 指定表格數(shù)據(jù)源為JSON數(shù)據(jù)的rows字段
height: 200,
striped: true,
pagination: true,
pageSize: 10,
pageList: [10, 15, 20],
rownumbers: true
});

以上代碼中，我們先定義了一份示例的JSON數(shù)據(jù)，其中包含一個total字段表示數(shù)據(jù)總數(shù)，和一個rows字段表示具體的數(shù)據(jù)行。接著是EasyUI表格的配置，包括了表格列定義、數(shù)據(jù)源、表格高度、分頁等。我們將JSON數(shù)據(jù)的rows字段作為表格的數(shù)據(jù)源，即可在頁面上渲染出數(shù)據(jù)表格。

需要注意的是，如果從API獲取JSON數(shù)據(jù)，則需要在Ajax成功回調(diào)函數(shù)中將數(shù)據(jù)傳遞給EasyUI表格。代碼如下：

$.ajax({
url: '/api/getData',
type: 'GET',
success: function(data) {
$('#table').datagrid({
data: data['rows'],
// 其他表格配置
});
},
error: function() {
alert('獲取數(shù)據(jù)失敗！');
}
});