EasyUI是一款非常受歡迎的前端UI框架,其提供了許多方便易用的UI組件。在EasyUI中,我們可以通過(guò)AJAX加載.json文件來(lái)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的加載和操作。
在EasyUI中,我們可以通過(guò)datagrid組件來(lái)展示json數(shù)據(jù)。以下是一個(gè)datagrid的基本配置:
$('#datagrid').datagrid({ url:'data.json', method:'get', columns:[[ {field:'id',title:'ID',width:100}, {field:'name',title:'Name',width:100}, {field:'age',title:'Age',width:100} ]] });
以上代碼中,我們配置了datagrid組件的url屬性為data.json,表示加載名為data.json的.json文件,這里的.json文件是一個(gè)數(shù)組,每個(gè)數(shù)組元素表示一條數(shù)據(jù)記錄。通過(guò)columns屬性,我們可以指定要展示的列和列的寬度。
接下來(lái),我們來(lái)看一下data.json文件的格式:
[ {"id":1,"name":"John","age":30}, {"id":2,"name":"Mike","age":23}, {"id":3,"name":"Lisa","age":45}, ]
以上代碼中,我們定義了一個(gè)數(shù)組,數(shù)組中包含了三條數(shù)據(jù)記錄,每條記錄都以JSON格式來(lái)表示,包含了id、name和age三個(gè)字段。
通過(guò)以上配置和文件格式,我們就可以在EasyUI中以datagrid形式展示動(dòng)態(tài)加載的json數(shù)據(jù)了。