个人中心
gpt4 book ai didi

javascript - 自定义小部件中的 dgrid

转载 作者：行者123 更新时间：2023-12-03 10:38:13 25 4
gpt4 key购买 nike

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

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

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 class="snippet-code-js lang-js prettyprint-override"><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();
    					}
    					
    				}
        
        });
      
      
      });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    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%;
}</code></pre>
</div>
</div>

最佳答案

Dgrid 教程显示以下注释:

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

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

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

关于javascript - 自定义小部件中的 dgrid，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28904161/

25 4 0
文章推荐： javascript - 具有多个控件的数据 View
文章推荐： javascript - Angular Directive(指令) : ng-model not updated properly when selection changes
文章推荐： javascript - Bootstrap-tour 未初始化
文章推荐： javascript - 'disconnect' 事件(服务器端)上套接字的客户端范围会发生什么情况
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com