Javascript 用于显示dgrid的Dojo小部件_Javascript_Dojo_Dgrid

Javascript 用于显示dgrid的Dojo小部件

javascript dojo

Javascript 用于显示dgrid的Dojo小部件,javascript,dojo,dgrid,Javascript,Dojo,Dgrid,我一直在使用dojo创建一个包含dgrid的简单模板小部件。这是： 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" /> </he

我一直在使用dojo创建一个包含dgrid的简单模板小部件。这是：

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>

SimpleTemplate.html

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

我看到了一些错误，我在本地和plunker都无法破译。我可能缺少什么？

您的代码中有严重错误，一些是javascript基础，另一些是dojo

您的代码

var widget = new MyWidget.placeAt(myContainer);

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

应该是

var widget = new MyWidget.placeAt(myContainer);

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

另外，

myContainer

令人困惑，我建议使用您已经包含的

dojo/dom

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

现在，关于您的小部件，您的小部件正在扩展

\u 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
    ) {

扩展

\u 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();
        }

请注意，我已经在列
、数据
和自定义网格
前面添加了这个。

这些更改解决了您的大多数问题，剩下的一个问题是抱怨已注册的小部件
，我通过删除DijitRegistry
模块解决了这个问题，因为我不知道它的功能和用途
我向您推荐一些链接：



希望能有所帮助
非常感谢卡斯特罗！你是不是碰巧做了那些编辑并使之生效了？不幸的是，我试图组织这些突袭，结果在没有注意到你答案的情况下删除了代码。我重新创建了代码，进行了您建议的更改，并编辑了问题中的链接。但是它仍然给了我一个空白页，我得到了404个错误，因为你得到的404是因为dgrid
需要一些包，如put selector/put
和xstyle/has class
，并且试图从错误的位置获取它们，要么更新到最新的dgrid
版本，即v1.1.0
，或者您需要调整您的dojoConfig
，以便您可以从正确的位置加载此模块检查这是您的代码，但只需将dgrid
版本设置为v1.1.0
，即可正常工作：-）非常感谢！我看到了数据，但它看起来不像一个普通的dgrid（它通常看起来像这样：）。它似乎被格式化为常规文本。我在不同的浏览器上试过，但都没用。可能缺少什么？是否包括dgrid
样式？如果您使用的是CDNCDN.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css