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":"女"}]
很奇怪,路径没错,就是不能显示出数据来
解决方式:查看浏览器的后台信息的时候发现问题所在了,
主要是浏览器的问题,可以选择换一个浏览器或者设置谷歌浏览器的启动参数。