用于显示 dgrid 的 Dojo 小部件答案

【问题标题】：Dojo widget to display a dgrid用于显示 dgrid 的 Dojo 小部件
【发布时间】：2016-08-19 19:16:13
【问题描述】：

我一直在努力创建一个简单的模板化小部件，其中包含使用 dojo 的 dgrid。这里是my code in plunker：

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
  <div id="myContainer"></div>
  <script type="text/javascript">
    var dojoConfig = {
      async: true,
      parseOnLoad: true,
      packages: [{
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
      }, {
        name: 'myApp',
        location: window.location.href.replace(/\/$/, "")
      }]
    }
  </script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"></script>
  <script type="text/javascript">
    require(["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
      var widget = new MyWidget.placeAt(myContainer);
    });
  </script>
</body>
</html>

SimpleTemplatedGridWidget.js

define([
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (registry, declare, Grid, DijitRegistry, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {

        data : [
            { first: 'Bob', last: 'Barker', age: 89 },
            { first: 'Vanna', last: 'White', age: 55 },
            { first: 'Pat', last: 'Sajak', age: 65 }
        ],

        columns : {
            first: 'First Name',
            last: 'Last Name',
            age: 'Age'
        },

        CustomGrid : declare([Grid, DijitRegistry]),

        postCreate: function() {
            myGrid = new CustomGrid({
                columns: columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(data);
            myGrid.startup();
        }       
    });
});

SimpleTemplate.html

<div data-dojo-attach-point='AttachGrid'></div>

我看到我无法在本地和 plunker 破译的错误。我可能会错过什么？

【问题讨论】：

标签： javascript dojo dgrid

【解决方案1】：

您的代码中有严重错误，有些是 javascript 基础知识，有些是 dojo。

您的代码

var widget = new MyWidget.placeAt(myContainer);

应该是

var widget = new MyWidget().placeAt(myContainer);

另外，myContainer 很容易混淆，我建议使用您已经包含的dojo/dom

var widget = new MyWidget().placeAt(dom.byId('myContainer'));

现在，关于你的小部件，你的小部件正在扩展 _WidgetBase 但它不包括在内，所以

define([
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dijit/_WidgetBase", //You are missing this module
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (
    registry, 
    declare, 
    Grid, 
    DijitRegistry, 
    _WidgetBase, //Also include it here
    _TemplatedMixin, 
    template
    ) {

在扩展_TemplatedMixin 时，我们需要定义templateString，它应该是加载了dojo/text!.... 的模板或静态模板，在您的情况下

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template, //need to add

现在，您的 postCreate 函数引用了许多未定义的变量，查看您的代码，我假设您想要获取小部件本身的属性，所以

        postCreate: function() {
            myGrid = new this.CustomGrid({
                columns: this.columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(this.data);
            myGrid.startup();
        }

请注意，我在columns、data 和CustomGrid 前面添加了this.；

此更改解决了您的大部分问题，仅剩下一个抱怨 already registered widget，我通过删除 DijitRegistry 模块解决了这个问题，因为我不知道它的作用和用途。

希望对你有帮助

【讨论】：

非常感谢卡斯特罗！您是否碰巧进行了这些编辑并使其工作？不幸的是，我试图组织这些笨拙的东西，最终我在没有注意到你的回答的情况下删除了代码。我重新创建了代码并进行了您建议的更改并编辑了我的问题中的链接。但它仍然给我一个空白页面，我收到 404 错误
你得到的 404 是因为 dgrid 需要一些包作为 put-selector/put 和 xstyle/has-class 并试图从错误的位置获取它们，要么更新到最新的 dgrid 版本是v1.1.0，否则您需要调整您的dojoConfig，以便您可以从正确的位置加载此模块
查看this plunker，这是您的代码，但只需将dgrid 版本设置为v1.1.0 即可：-)
非常感谢！我看到了数据，但它不像普通的 dgrid（它通常看起来像这样：jspreadsheets.com/images/libraries/dgrid/…）。它似乎被格式化为常规文本。我尝试了不同的浏览器，但它不起作用。可能缺少什么？
您是否包含dgrid 样式？，如果您使用CDN cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css，这是网址