dgrid 按需网格未填充内存存储答案

【问题标题】：dgrid ondemand grid not filling with memory storedgrid 按需网格未填充内存存储
【发布时间】：2014-07-07 18:25:10
【问题描述】：

我正在尝试用内存存储填充我的 dgrid onDemand 网格，但网格不会填充数据。我正在拨打 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>

知道为什么这个网格会是空的吗？谢谢

【问题讨论】：

我在网格中添加了列，如下所示——列确实出现了，但数据没有。当我调试时，我可以查看网格并看到它确实有数据存储。 '代码'函数 TicketUnMarkedSet(GridData) { var gridStore = new Memory({ data: GridData }); grid = new OnDemandGrid({ showHeader: true, store: gridStore, columns: { ID: "ID", Ticket: "Ticket", Street: "Address", DateRcvd: "DateRcvd" } .....'code'
检查 GridData 中的 json 数据。它可能有语法错误。如果可以，请添加到帖子中。
我在 JSONLint 上验证了 JSON——一个示例 {"TicketUnMarkedGetResult":[{"Company":"E W HARMON","DateRcvd":"\/Date(1387311540000-0800)\/","DaysToWork":-202,"ID":9972,"OldTicket":"A30140156","Priority":"NORM","Street":" EL PRADO RD","Ticket":"A30730511","Type":"UPDT","WorkDate":"\/Date(1387311540000-0800)\/","ptCenterX":-13099875.6316766,"ptCenterY":4024215.96028757}]}

标签： javascript dojo dgrid

【解决方案1】：

检查gridStore内存对象是否存在有效数据：

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/

道场网格演示：

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>

【讨论】：

谢谢，我试过这种方法，但还是不行。其中一个教程有一个我使用的 grid.on("dgrid-error")，但网格似乎没有抛出错误。我真的很难过
这是一个真正的暗中刺伤......但是，将您的 json 数据元素从“TicketUnMarkedGetResult”更改为“items”怎么样？？
编辑了我上面的帖子以检查内存对象。查看我的帖子顶部。
我尝试查询商店并没有返回任何内容。看来这家店有问题。 JSON 是有效的，但根据过去的经验，我知道 dojo 不喜欢从 SQL Server "DateRcvd":"\/Date(1387311540000-0800)\/" 返回的日期格式。或许这就是问题所在——
我会从您的 JSON 中删除 {"TicketUnMarkedGetResult": 并将 'id: 添加到每条记录。也许将所有日期字段定义为字符串，直到您获得正确显示的数据。可能将 ID 字段重命名为 REC_ID??

【解决方案2】：

根据教程（有关详细信息，请参阅链接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();
}

【讨论】：

【解决方案3】：

问题似乎是我的 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
}]

适用于网格——我只需要找到一种方法来进行这种转换

【讨论】：

听起来你快到了..w3schools.com/json/json_eval.asp 也许试试 var gridObj = JSON.parse(gridData);然后将 gridObj 插入您的数据存储中？？
JSON.parse() 失败，我认为是因为它已经是一个对象数组。我正在尝试转换为字符串，在每个对象后添加回车，然后重新解析。 var STicketData = JSON.stringify(result, null, "\r"); var OTicketData = JSON.parse(STicketData)。但是没有运气