0

我在数字/对话框中使用 dgrid OnDemandGrid。我发布了对话框，但网格没有显示。我可以看到网格应该出现的位置，但网格本身并没有使用 grid.startup() 发布。我认为这是因为我不了解事件何时发生，因此没有在正确的时间启动网格。

我正在为用户设置一个页面来定义目标。我想让他们将一个目标与另一个目标联系起来。

为此，我想发布一个带有现有目标网格的对话框，让他们选择一个进行链接。即使我在页面上获得了目标网格，当我尝试对对话框中的网格执行相同的操作时，它也无法显示网格。

我已经使用 dgrid 在主页上形成了一个网格，并且该代码可以显示现有目标的列表，就像这样......

HTML

<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()，但这些都没有给我网格。当您单击链接按钮时，控制台中的输出是目标列表节点在启动（）之前和之后都有内容“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 日更新

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

  • dgrid 1.2.1
  • dstore 1.2.1
  • dojo-release-1.13.0

对于它的价值，我通过将 .tar.gz 上传到 Web 服务器并在那里解压缩它们来安装 dgrid 和 dojo 文件，但是我通过将 .zip 文件下载到我的 Windows 机器，在那里解压缩它们来安装 dstore 文件，然后使用 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({

理论上，对话框应该在窗口对象上进行，以便在设置网格之前渲染它。但这也不起作用。

4

1 回答 1

0

dgrid 执行 DOM 维度计算，如果 dgrid DOM 不可见，则会失败。听起来您的对话就是这种情况。解决方案是startup/renderArray在 dgrid DOM 可见时调用。grid.renderArray(gridData)在对话框打开并可见后尝试调用。

于 2020-05-19T04:43:11.210 回答