EasyUI是一款非常好用的前端UI框架,使用它可以快速搭建頁面,實(shí)現(xiàn)功能。在實(shí)際項(xiàng)目中,我們常常需要加載本地JSON文件,這時(shí)候就需要使用EasyUI提供的方法來實(shí)現(xiàn)。
首先,我們需要通過jQuery的getJSON()方法來讀取本地JSON文件,獲取數(shù)據(jù),然后將數(shù)據(jù)傳遞給EasyUI的datagrid組件進(jìn)行渲染。
$.getJSON('data.json', function(data) { //讀取本地JSON文件 $('#datagrid').datagrid({ //datagrid組件 data: data, //傳遞數(shù)據(jù) columns:[[ //列 {field:'id',title:'編號'}, {field:'name',title:'名稱'}, {field:'age',title:'年齡'}, ]] }); });
在上面的代碼中,我們使用了$.getJSON()方法來讀取本地的data.json文件,然后將獲取到的數(shù)據(jù)傳遞給EasyUI的datagrid組件進(jìn)行渲染。
同時(shí),我們還需要在HTML頁面中添加datagrid組件的容器,例如:
這樣,當(dāng)我們運(yùn)行頁面時(shí),就可以看到EasyUI自動(dòng)加載了本地的JSON數(shù)據(jù),并將數(shù)據(jù)以datagrid的形式呈現(xiàn)出來。