1.直接通过table标签内嵌
<table class="easyui-datagrid"
data-options="url:'https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00',method:'get',singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'PushDriverMessageDBID'" width="80">Item ID</th>
<th data-options="field:'PushDriverMessageGuid'" width="100">PushDriverMessageGuid</th>
<th data-options="field:'AppKey',align:'right'" width="80">AppKey</th>
<th data-options="field:'PushNotificationMessage',align:'right'" width="300">PushNotificationMessage</th>
<th data-options="field:'Sender'" width="150">Sender</th>
<th data-options="field:'MessageDated',align:'center'" width="50">MessageDated</th>
</tr>
</thead>
</table>th标签指定了表格的每一列。
2.通过JS填充数据
<table id = "DGDispatching"></table><script>
var JSONDispatchingURL = "https://www.driverlive.co.uk/rest/api/PushMessage/GetPushDriverMessagesList?DeviceId=a99f8a977696bfb9&DateFrom=2014-10-27T00:00:00&DateTo=2015-11-11T00:00:00";
$('#DGDispatching').datagrid({
url: JSONDispatchingURL,
method: 'get',
fit:true,
loadMsg:'加载中...',
fitColumns:true,
columns: [[
{ field: 'PushDriverMessageDBID', title: 'PushDriverMessageDBID', width: 100 },
{ field: 'PushDriverMessageGuid', title: 'PushDriverMessageGuid', width: 200 },
{ field: 'AppKey', title: 'AppKey', width: 200 },
{ field: 'PushNotificationMessage', title: 'PushNotificationMessage', width: 300 },
{ field: 'Sender', title: 'Sender',align:'center', width: 200 },
{ field: 'MessageDated', title: 'MessageDated', width: 200 }
]]
});
</script>3.资源文件
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>4.属性解释
运行效果：
