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表示等分宽度，要配合100这个属性值(提倡)
fitColumns=false表示不等分宽度，这时由100这个属性值来决定宽度，默认为false
singleSelect=true表示可以选择表格中的一项
singleSelect=false表示可以选择表格中的多项，默认为false
-->
<table
style="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',50">编号</th>
<th data-options="field:'name',50">姓名</th>
<th data-options="field:'sal',50">薪水</th>
<th data-options="field:'sex',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
主要是浏览器的问题，可以选择换一个浏览器或者设置谷歌浏览器的启动参数。