html部分
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入css文件，無順序 -->
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<!-- 引入js文件，有順序 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
data-options是easyui特有的屬性
url表示加載json的路徑
fitColumns=true表示等分寬度，要配合width:100這個屬性值(提倡)
fitColumns=false表示不等分寬度，這時由width:100這個屬性值來決定寬度，默認為false
singleSelect=true表示可以選擇表格中的一項
singleSelect=false表示可以選擇表格中的多項，默認為false
-->
<table
style="width:400px;height:250px"
border="2"
align="center"
class="easyui-datagrid"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'id',width:50">編號</th>
<th data-options="field:'name',width:50">姓名</th>
<th data-options="field:'sal',width:50">薪水</th>
<th data-options="field:'sex',width:50">性別</th>
</tr>
</thead>
</table>
</body>
</html>
json
[
{"id":1,"name":"哈哈","sal":6000,"sex":"男"},
{"id":2,"name":"呵呵","sal":7000,"sex":"男"},
{"id":3,"name":"嘻嘻","sal":8000,"sex":"女"},
{"id":4,"name":"笨笨","sal":9000,"sex":"男"},
{"id":5,"name":"聰聰","sal":5000,"sex":"男"},
{"id":6,"name":"花花","sal":4000,"sex":"女"}
]
很奇怪，路徑沒錯，就是不能顯示出數據來
解決方式：查看瀏覽器的后台信息的時候發現問題所在了，Ajax本地跨域問題 Cross origin requests are only supported for HTTP
主要是瀏覽器的問題，可以選擇換一個瀏覽器或者設置谷歌瀏覽器的啟動參數。