我在digit/对话框中使用dgrid OnDemandGrid。我发布了对话框，但网格没有显示。我可以看到网格应该出现的位置，但网格本身没有使用grid.startup（）发布。我认为这是因为我不知道事件何时发生，因此没有在正确的时间启动网格。
我正在为用户设置一个用于定义目标的页面。我希望他们将一个目标链接到另一个目标。
为了做到这一点，我想发布一个对话框，其中有一个现有目标的网格，让他们选择一个链接。即使我在页面上得到了一个目标的网格，当我试图对对话框中的网格做同样的事情时，它也无法显示网格。
我已经使用dgrid在主页上形成了一个网格，那个代码的工作原理是显示现有目标的列表，就像这样...
超文本标记语言

<div>
  <h4>Goals</h4> 
  <div id="goalgrid" class="grid"></div>
</div>

脚本

require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/CheckBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
  function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, CheckBox, Button, dom, on) {
    var gridData = [
        { id: 1, goalName: "Top Goal", parentId: 0 },
        { id: 2, goalName: "Objective 1", parentId: 1 },
        { id: 3, goalName: "Objective 2", parentId: 1 }
    ];
    gridStore = new Memory({data: gridData});
    var grid = new (declare([ OnDemandGrid, Selection ]))({
        collection: gridStore,
        columns: {
          id: "ID",
          goalName: "Name",
          parentId: "Parent"
        }
    }, "goalgrid");
    grid.renderArray(gridData);
...

此页面显示目标标题和gridData中包含三个目标的网格。
我尝试为这样的对话框添加代码：

echo '<div class="content">';
echo '<p>This page allows you to describe your goals.</p>
       <div data-dojo-type="dijit/form/Form" id="connect-form" widgetid="form" lang="en" action="" method="">
          <fieldset data-dojo-attach-point="part1">
            <div class="event-input-text">
              <h4>Goals</h4> 
              <div id="maingrid">Main grid for page, which shows data when dgrid is invoked on maingrid.</div>
            </div>
            <div id="buttonArea" style="padding:5em 0 0 15px;">
            <input id="goa-link-button" name="submit" value="Link" type="button">
            </div>
            </fieldset>
       </div>';
echo '</div>'; // end of content
echo '<script>
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dstore/Memory", "dijit/Dialog", "dijit/form/TextBox", "dijit/form/Button", "dojo/dom", "dojo/on"],
  function (declare, OnDemandGrid, Selection, Memory, Dialog, TextBox, Button, dom, on) {

    var linkGoalDialogContent = `
      <div id="gldiv">
        <ul>
          <li>Sub-Goal ID: ID</li>
          <li>Sub-Goal Name: Goal</li>
        </ul>
        <div id="goallist" class="listgrid">gridspace</div>
        <div class=\"dijitDialogPaneActionBar\">
            <input id="goa-link-goal-cancel-button" name="submit" value="Cancel" type="button">
            <input id="goa-goal-link-button" name="submit" value="Link" type="button">
        </div>
      </div>`;
    var goalGridData = [
        { id: 1, goalName: "Top Goal" },
        { id: 2, goalName: "Objective 1" },
        { id: 3, goalName: "Objective 2" }
    ];
    var goalGridStore = new Memory({data: goalGridData});
    var ggrid = new (declare([ OnDemandGrid, Selection ]))({
        collection: goalGridStore,
        columns: {
          id: "ID",
          goalName: "Name"
        }
    }, "linkGoalDialog.gldiv.goallist");
    var linkGoalDialog = new Dialog({
      id: "linkGoalDialog",
      title: "Link Goal to New Parent Goal",
      content: linkGoalDialogContent,
      style: "width: 400px",
      onShow: function() {
           console.log("Show called on linkGoalDialog\n");
           console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
           ggrid.startup();
           console.log("The goallist node has contents: "+dom.byId("goallist").innerHTML+"\n");
      },
      onHide: function () {
           console.log("Hide called on linkGoalDialog\n");
      }
    });
    ggrid.startup();
    on(dom.byId("goa-link-button"), "click", function(){
        linkGoalDialog.show();
    });
    on(dom.byId("goa-link-goal-cancel-button"), "click", function(){
        linkGoalDialog.hide();
    });
    on(dom.byId("goa-goal-link-button"), "click", function(){
        linkGoalDialog.hide();
    });
});
</script>';

我也尝试了用 ggrid.renderArray（goalGridData） 代替 ggrid.startup（），但是它们都没有给予我网格。当您单击Link按钮时，控制台中的输出是goallist节点在startup（）之前和之后都有“gridspace”内容。
而且，事实上，对话框显示在带有“gridspace”的页面上，网格应该在那里。
因为原始网格（此处未显示代码）正确加载和显示，所以我怀疑我遇到了计时问题或某种范围问题。
下面是我为此使用的自定义CSS：

.grid {
    width: 700px;
    height: 25em;
    margin: 10px;
}

.listgrid {
    width: 300px;
    height: 5em;
    margin: 10px;
}

.grid .dgrid-cell {
    width: 80px;
}

.grid .field-id {
    width: 10px;
}

.grid .field-goalName {
    width: 100px;
}

.grid .field-parentId {
    width: 15px;
}

有人知道为什么对话框中的网格没有显示吗？谢谢帮助！

2020年5月3日更新

以下是我正在使用的版本：

• 数据网格1.2.1
• 数据存储1.2.1
• dojo版本-1.13.0

无论如何，我安装dgrid和dojo文件的方法是将. tar.gz文件上传到Web服务器并在那里解包，但安装dstore文件的方法是将.zip文件下载到Windows计算机，在那里解包，然后用FTP复制到Web服务器。
我将在WebsiteBaker框架的上下文中使用这些代码，WebsiteBaker-2_12_2.tar.gz提供了这些代码。
经过更多的研究，我尝试在调用dialog.show（）后放置网格，如下所示：

on(dom.byId("goa-link-button"), "click", function(){
        linkGoalDialog.show();
        ggrid.renderArray(goalGridData);
    });

这不起作用，我也试过ggrid.startup（），但是也不起作用。

2020年5月26日更新

经过更多的研究，我试着改变：

var linkGoalDialog = new Dialog({

到

window.linkGoalDialog = new Dialog({

理论上，对话框应该放在窗口对象上，这样它就可以在调用之前呈现，以设置网格。但是这也不起作用。