我试图用内存存储填充我的dgrid onDemand Grid,但网格不会填充数据。我正在进行xhr.get通话,并且我已经验证了正在返回的数据。这就是我所拥有的:
......
var grid;
function TicketUnMarkedSet(GridData) {//this function is called back after xhr.get and the parameter GridData is populated
var gridStore = new Memory({ data: GridData });//this store seems to be ok
grid = new OnDemandGrid({
showHeader: true,
store:gridStore
}, "gridDiv");
grid.startup();
grid.refresh();
}
<div style="position: absolute; left: 0px; bottom: 0px; z-index: 999;">
<div id="tpStationData" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Open Tickets', closable:false, open:false">
<div id="gridTabDiv" data-dojo-type="dijit/layout/ContentPane" style="width: 100%;
height: 100%; overflow: auto;" title="Data">
<div id="gridDiv">
</div>
</div>
</div>
</div>
知道为什么这个网格是空的?感谢
答案 0 :(得分:0)
检查gridStore Memory对象以查看是否存在有效数据:
http://dojotoolkit.org/reference-guide/1.10/dojo/store/Memory.html
我认为您应该将小写的“id:1”添加到您的JSON数据中,并为每条记录将此值增加1。
require(["dojo/store/Memory"], function(Memory){
var someData = [
{id:1, name:"One"},
{id:2, name:"Two"}
];
store = new Memory({data: someData});
store.get(1) -> Returns the object with an id of 1
store.query({name:"One"}) // Returns query results from the array that match the given query
store.query(function(object){
return object.id > 1;
}) // Pass a function to do more complex querying
store.query({name:"One"}, {sort: [{attribute: "id"}]}) // Returns query results and sort by id
store.put({id:3, name:"Three"}); // store the object with the given identity
store.remove(3); // delete the object
});
在GridData中使您的JSON数据输入看起来像上面示例中的someData。
也许改变:
var gridStore = new Memory({ data: GridData });
到
var gridStore = new Memory({ data: GridData.TicketUnMarkedGetResult });
然后添加dataStore(ObjectStore):
dataStore = new ObjectStore({ objectStore: gridStore });
将dataStore添加到您的网格中:
grid = new DataGrid({
store: dataStore,
希望这会帮助你... 我在数据网格的演示页面上找到了这个信息:
在此页面的示例中:http://dojotoolkit.org/documentation/tutorials/1.8/datagrid/
Dojo网格演示:
http://dojotoolkit.org/documentation/tutorials/1.8/datagrid/demo/datagrid.php
网格的JSON数据:
http://dojotoolkit.org/documentation/tutorials/1.8/datagrid/demo/hof-batting.json
此演示的代码:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: dojox/grid/DataGrid</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.5/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.5/dojo/resources/dojo.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.5/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
</head>
<body class="claro">
<h1>Demo: dojox/grid/DataGrid</h1>
<br/>
<div id="grid"></div>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.5/dojo/dojo.js"></script>
<script>
var grid, store, dataStore;
require([
"dojox/grid/DataGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/request",
"dojo/domReady!"
], function(DataGrid, Memory, ObjectStore, request){
request.get("all-batting.json", {
handleAs: "json"
}).then(function(data){
store = new Memory({ data: data.items });
dataStore = new ObjectStore({ objectStore: store });
grid = new DataGrid({
store: dataStore,
query: { id: "*" },
structure: [
{
noscroll: true,
defaultCell: { width: "84px" },
cells: [
{ name: "First Name", field: "first" },
{ name: "Last Name", field: "last" }
]
},{
defaultCell: { width: "60px" },
cells: [
[
{ name: "Bats", field: "bats", width: "70px", rowSpan: 2 },
{ name: "Throws", field: "throws", width: "70px", rowSpan: 2 },
{ name: "G", field: "totalG" },
{ name: "AB", field: "totalAB" },
{ name: "R", field: "totalR" },
{ name: "RBI", field: "totalRBI" },
{ name: "BB", field: "totalBB" },
{ name: "K", field: "totalK" }
],[
{ name: "Games as Batter", field: "totalGAB", colSpan: 2 },
{ name: "H", field: "totalH" },
{ name: "2B", field: "total2B" },
{ name: "3B", field: "total3B" },
{ name: "HR", field: "totalHR" }
]
]
}
]
}, "grid");
// since we created this grid programmatically, call startup to render it
grid.startup();
});
});
</script>
</body>
答案 1 :(得分:0)
根据教程(有关详细信息,请参阅链接here),数据网格中包含列,已在代码中排除。
也许这就是问题所在。
// Create an instance of OnDemandGrid referencing the store
var grid = new OnDemandGrid({
store: store,
columns: {
first: "First Name",
last: "Last Name",
totalG: "Games Played"
}
}, "grid");
grid.startup();
此外,如果上述更改无效,您可以创建本地数据存储(仅用于测试目的),如下所示。它可以帮助您缩小问题范围。
function TicketUnMarkedSet(GridData) {//this function is called back after xhr.get and the parameter GridData is populated
var testdata = [
{ id:1, first: "Bob", last: "Barker", age: 89 },
{ id:2, first: "Vanna", last: "White", age: 55 },
{ id:3, first: "Pat", last: "Sajak", age: 65 }
];
var gridStore = new Memory({ data: testdata });
// Create an instance of OnDemandGrid referencing the store
var grid = new OnDemandGrid({
store: gridStore ,
columns: {
first: "First Name",
last: "Last Name",
age: "Age"
}
}, "gridDiv");
grid.startup();
}
答案 2 :(得分:0)
问题似乎是我的json格式。当我从我的服务中取回它时,它看起来像这样:
[{"Company":"E W HARMON","DateRcvd":"\/Date(1387311540000-0800)\/","DaysToWork":-203,"ID":9972,"OldTicket":"A30140156","Priority":"NORM","Street":" EL PRADO RD","Ticket":"A30730511","Type":"UPDT","WorkDate":"\/Date(1387311540000-0800)\/","ptCenterX":-13099875.6316766,"ptCenterY":4024215.96028757},{"Company":"E W HARMON","DateRcvd":"\/Date(1389731340000-0800)\/","DaysToWork":-175,"ID":10263,"OldTicket":"A30140156","Priority":"NORM","Street":" EL PRADO RD","Ticket":"A30730511","Type":"UPDT","WorkDate":"\/Date(1389731340000-0800)\/","ptCenterX":-13099875.6316766,"ptCenterY":4024215.96028757}]
并且它不能与我的dgrid一起使用。如果我通过http://jsonlint.com/处的验证器运行它,它说数据是有效的json,但是将其更改为:
[
{
"Company": "E W HARMON",
"DateRcvd": "/Date(1387311540000-0800)/",
"DaysToWork": -203,
"ID": 9972,
"OldTicket": "A30140156",
"Priority": "NORM",
"Street": " EL PRADO RD",
"Ticket": "A30730511",
"Type": "UPDT",
"WorkDate": "/Date(1387311540000-0800)/",
"ptCenterX": -13099875.6316766,
"ptCenterY": 4024215.96028757
},
{
"Company": "E W HARMON",
"DateRcvd": "/Date(1389731340000-0800)/",
"DaysToWork": -175,
"ID": 10263,
"OldTicket": "A30140156",
"Priority": "NORM",
"Street": " EL PRADO RD",
"Ticket": "A30730511",
"Type": "UPDT",
"WorkDate": "/Date(1389731340000-0800)/",
"ptCenterX": -13099875.6316766,
"ptCenterY": 4024215.96028757
}]
与网格一起工作 - 我只需要找到一种方法来进行这种转换