自定义小部件中的 dgrid

Question

我有一个自定义小部件，我从后端向其传递数据。网格显示在正确的位置但未显示数据。我尝试使用硬编码数据，但只显示了 headers。网格已设置高度和宽度。

这是代码片段。我将不胜感激任何帮助。谢谢。

define(["dojo/_base/declare",             "dijit/_WidgetBase", 
        "dijit/_TemplatedMixin",          "dijit/_WidgetsInTemplateMixin", 
        "dijit/_OnDijitClickMixin",

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre><code>    GridWidget.js

    define(["dojo/_base/declare",             "dijit/_WidgetBase", 
            "dijit/_TemplatedMixin",          "dijit/_WidgetsInTemplateMixin", 
            "dijit/_OnDijitClickMixin", "dojo/text!./templates/GridWidget.html",
           "dgrid/Grid","dgrid/Keyboard", "dgrid/Selection", "dgrid/extensions/DijitRegistry", "dstore/Memory", "dstore/Trackable"], function(declare,           _WidgetBase, 
         _TemplatedMixin,    _WidgetsInTemplateMixin, 
         _OnDijitClickMixin, template, Grid, Keyboard, Selection, DigitRegistry, Memory, Trackable) {
      
      
      return decalare("GridWidget", [_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, _WidgetsInTemplateMixin], {
        widgetsInTemplate: true,
        baseClass: 'GridWidget',
        templateString: template,
        data: null,
        store: null,
        grid: null,
        columns: null,
        
        constructor: function(data) {
          this.data = data;
        },
        
        _setData: function(input) {
         if (input) {
          this._set("data", input);
         }
        },
        
        getData: function() {
         return this.data;
        },
        
        
        postCreate : function() {
         this.inherited(arguments);
         

         var StandardGrid = declare([Grid, Selection, Keyboard, DijitRegistry]);
                                                                            

         this.store = new (declare([Trackable, Memory]))({
          data       : this.data,
          idProperty : "isbn"
         });
         
         this.columns =  {
           bookTitle     : "Title",
           first         : "First Name",
           last          : "Last Name",
           releaseDate   : "Release Date"
         };

              
         this.grid = new StandardGrid({
          collection      : this.store,
          columns         : this.columns,
          cellNavigation  : false,
          noDataMessage   : "No results.",
          loadingMessage  : "Loading Data...",
         }, this.gridNode); 
          }
        
        
              startup: function() {
         if (this._started) return;
         this.inherited(arguments);
         if (this.grid) {
          this.grid.startup();
         }
         
        }
        
        });
      
      
      });

    GridWidget.html
    <div class="${baseClass}">
      <div class="${baseClass}Grid"data-dojo-attach-point="gridNode"></div>
    </div>


    testGridWidget.html

    <!DOCTYPE HTML>
    <html lang="en">
     <head>
      <meta charset="utf-8">
      <title>Test: Dgrid 0.4</title>
      <link rel="stylesheet" href="style.css" media="screen">
      <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" media="screen">
      
      <script>
     //var startTime = new Date();
     var CONTEXT_ROOT = 'DtossApp';
     
      var djConfig = (function(){
      var base = location.href.split("/");
      base.pop();
      base = base.join("/");
      return {
       parseOnLoad: true,
       isDebug: true,
       packages: [{
        name: CONTEXT_ROOT,
        location: base + "/widget"
       }]
      };
     })();
    </script>
        </head>
        <body class="claro">
           <script>
               function showGrid() {
       require([
        CONTEXT_ROOT + '/GridWidget',
        'dojo/dom-construct',
        'dojo/dom',
        'dijit/layout/ContentPane',
       ], function (GridWidget, domConstruct, dom, ContentPane) {
        var testWidget = new GridWidget({ data: createData()});
        var cp = new ContentPane({    
         title    : "Book List",
         content  : testWidget});
         
        var ref = dom.byId('grid');
        domConstruct.place(cp.domNode, ref);
        
        testWidget.startup();
                  
                    //Copied from dgrid laboratory sample..
        function createData () {
         var data = [];
         var column;
         var i;
         for (i = 0; i < 50; i++) {
          data.push({});
          for (column in { first: 1, last: 1, bookTitle: 1, releaseDate: 1 }) {
           data[i].isbn = i;
           data[i][column] = column + '_' + (i + 1);
          }
         }
         return data;
        }
                  });
              }
            </script>
      
      <h1>Test: Dgrid 0.4</h1>
         <div id="buttonContainer">
          <button class="action" onClick="showGrid1()">Show Grid</button>
         </div>
      <div id="grid"></div>
         <!-- load dojo and provide config via data attribute -->
      <script src="dojo/dojo/dojo.js"></script>
      
        </body>
    </html>


GridWidget.css

.GridWidgetGrid {
    height: 300px;
    width: 80%;
}

Answer 1

Dgrid 教程显示以下注释：

使用基本网格模块时，网格将是空的，直到您调用 renderArray。更高级的基于商店的实现（如 OnDemandGrid）将自动从商店中填充自己。

我将我的网格更改为 OnDemandGrid，它会自动从存储中选取数据。

还在启动方法中调用 renderArray 为 Grid 填充数据。

自定义小部件中的 dgrid

dgrid in a custom widget

javascript

html

dojo

dgrid