dgrid ondemand网格没有填充内存存储

时间:2014-07-07 18:25:10

标签: javascript dojo dgrid

我试图用内存存储填充我的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>

知道为什么这个网格是空的?感谢

3 个答案:

答案 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
}]

与网格一起工作 - 我只需要找到一种方法来进行这种转换