$(function () {
LoadDataGrid(); //加载列表数据
});
//列表
function LoadDataGrid() {
$("#Infolist").datagrid({
loadMsg: '数据加载...',
url: 'lpdata.json',
columns: [[
{ field: 'tHI_Code', title: '楼盘code', width: 80, align: 'center' },
{ field: 'tHI_Name', title: '项目名称', width: 300, align: 'center' },
{ field: 'tBA_ID_District', title: '区域', width: 80, align: 'center' },
{ field: 'tHI_Clicks', title: '点击次数', width: 80, align: 'center' },
{ field: 'tHI_Published', title: '发布时间', width: 100, align: 'center' },
{ field: 'tHI_Updated', title: '更新时间', width: 120, align: 'center' }
]]
});
}
--表格table
<table id="Infolist">
</table>
--json数据
{
"total": 173,
"rows": [
{
"thi_id": "01fbaa5289434f2a9ce07682d1adf3e2",
"thi_code": "kaiyueguangchang0592",
"thi_name": "凯悦广场",
"tba_id_district": "001008000",
"thi_clicks": "151",
"thi_published": "2013/10/16 10:51:31",
"thi_updated": "2014/5/4 17:25:28"
},
{
"thi_id": "0b36583701a8439e9f5e20a6f1ab453a",
"thi_code": "guojilongjundz",
"thi_name": "大洲国际龙郡",
"tba_id_district": "001001000",
"thi_clicks": "19",
"thi_published": "2013/10/16 10:50:50",
"thi_updated": "2013/10/28 10:37:35"
}
]
}
注意field配置的大小写要和数据源字段一致。如果你发布网站后访问还得确认你的服务器支持.json后缀的文件才行,iis默认是不支持.json文件的
本地file访问不要用chrome等webkit核心浏览器,ajax无法请求文件
function LoadDataGrid() {
$("#Infolist").datagrid({
loadMsg: '数据加载...',
url: 'lpdata.json',
columns: [[
{ field: 'thi_id', title: '楼盘code', width: 80, align: 'center' },
{ field: 'thi_name', title: '项目名称', width: 300, align: 'center' },
{ field: 'tba_id_district', title: '区域', width: 80, align: 'center' },
{ field: 'thi_clicks', title: '点击次数', width: 80, align: 'center' },
{ field: 'thi_published', title: '发布时间', width: 100, align: 'center' },
{ field: 'thi_updated', title: '更新时间', width: 120, align: 'center' }
]]
});
}
easyui提供demo案例,里面绑定数据有本地的,你可以参考一下。