自定义小部件中的dgrid

dgrid in a custom widget

本文关键字：dgrid 小部 自定义      更新时间：2023-09-26

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

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

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


    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%;
}

Dgrid教程显示了以下注释：

使用基本网格模块时，在调用renderArray之前，网格将为空。更高级的基于存储的实现，如OnDemandGrid，将自动从存储中填充它们自己。

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

在启动方法中调用renderArray也会填充Grid的数据。

相关文章：