1、今天研究了dojo datagrid加载WebService后台传上来的数据。研究来研究去发现他不是很难。用谷歌多调试一下就好了。
2、看很多例子，这个例子能够更好的帮我解决问题：https://dojotoolkit.org/documentation/tutorials/1.10/dojo_data/index.html
往下滑动页面会看到类似于下面例子的截图：
3、框架都好说，把字段对应上问题不大，主要是数据。我开始是直接将WebService传出来的JSON数据传入给Memory的data,导致各种错误。 后来看了上面这个例子之后，然后用谷歌调试，发现了问题的解决办法，原来Memory中的data是一个array数组对象，而我传给它的只是json字符串，所以导致各种报错，如下图所示：
4、这样我只要把我的JSON数据反序列话成Array数组对象问题就解决啦，我的完整代码如下：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Store Adapter</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="http://localhost/dojoroot/dojox/grid/resources/claroGrid.css" media="screen">
<style>
#grid {
width:100%;
}
</style>
</head>
<body class="claro">
<h1>Demo: Store Adapter</h1>
<div id="grid">
</div>
<!-- load dojo -->
<script src="http://localhost/dojoroot/dojo/dojo.js"></script>
<script type="text/javascript" src="http://localhost/dojoroot/jquery-3.1.0.js"></script>
<script> //好友信息
$.ajax({
type:"post",
contentType:"application/json;charset=UTF-8",
url:"http://localhost/StuManager/StuManWService.asmx/GetStuAllInfo",
dataType:"json",
success:function(result)
{
//showinfo(result.d)
var persons = eval("("+result.d+")"); //将WebService传过来的JSON数据反序列化成Array数组。
showinfo(persons);
}
});
function showinfo(ss)
{ var data, grid;
require([
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid",
"dojo/domReady!"
], function(Memory, ObjectStore, DataGrid){
var objectStore = new Memory({
data:ss
});
grid = new DataGrid({
store: ObjectStore({objectStore: objectStore}),
structure: [
{ name: "学号", field: "学号", width: "5%" },
{ name: "姓名", field: "姓名", width: "5%" },
{ name: "密码", field: "密码", width: "5%" },
{ name: "性别", field: "性别", width: "5%" },
{ name: "星座", field: "星座", width: "5%" },
{ name: "年龄", field: "年龄", width: "5%" },
{ name: "班级", field: "班级", width: "5%" },
{ name: "所在班级年份", field: "所在班级年份", width: "5%" },
{ name: "生日", field: "出生日期", width: "5%" },
{ name: "电话号码", field: "电话号码", width: "5%" },
{ name: "家庭住址", field: "家庭住址", width: "5%" },
{ name: "QQ号码", field: "QQ号码", width: "5%" },
{ name: "备注", field: "备注", width: "5%" }
]
}, "grid");
grid.startup();
});
};
</script>
</body>
</html>
PS1:说一下DataGrid显示乱码的问题,如下图：
解决办法：因为我的js文件和html文件是分开的，把js文件用记事本打开，然后另存为UTF-8格式的文件显示就正常了,如下图所示：
PS2:如果字段名和数组中的列名没有对应上，该列就会显示很多冒号，如下图所示：
3、加载JSON文件
JSON文件如下：
{
"items": [
{
"bats": "R",
"weight": 180.0
},
{
"bats": "R",
"weight": 165.0
}
]
}
JS代码如下：
<script src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
<script> require([
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dojo/domReady!"
], function(DataGrid, Memory, ObjectStore, request){
var grid, dataStore;
request.get("data/config.json", {
handleAs: "json"
}).then(function(data){
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
});
}); </script>