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>