EasyUI 是一個(gè)基于 jQuery 的 UI 庫，它提供了一系列的 UI 組件供開發(fā)者使用。在開發(fā)過程中，我們經(jīng)常會(huì)遇到需要加載本地 JSON 數(shù)據(jù)的情況，這時(shí)候 EasyUI 提供的 datagrid 組件就非常適用了。 首先，我們需要在 HTML 文件中引入 jQuery 和 EasyUI 的 CSS 和 JS 文件：

<link rel="stylesheet" >
<link rel="stylesheet" >
<link rel="stylesheet" >
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/easyui/1.9.11/jquery.easyui.min.js"></script>

接著，在 HTML 文件中創(chuàng)建一個(gè)空的 div 元素，用于放置 datagrid 組件：

<div id="datagrid"></div>

然后，我們需要編寫 JavaScript 代碼來加載本地 JSON 數(shù)據(jù)并綁定到 datagrid 組件上：

<script type="text/javascript">
// 加載本地 JSON 數(shù)據(jù)
var data = [
{"id":1, "name":"John", "age":30},
{"id":2, "name":"Tom", "age":25},
{"id":3, "name":"Lucy", "age":28}
];
// 綁定 datagrid 組件
$('#datagrid').datagrid({
data: data,      // 綁定數(shù)據(jù)
columns: [       // 設(shè)置列
{field:'id', title:'ID'},
{field:'name', title:'Name'},
{field:'age', title:'Age'}
]
});
</script>

最后，運(yùn)行頁面，就能夠看到加載了本地 JSON 數(shù)據(jù)的 datagrid 組件了：

使用 EasyUI 加載本地 JSON 數(shù)據(jù)真的非常簡單易用，而且效果非常好。希望這篇文章能夠幫助你快速上手 EasyUI。