我在一个digitdialog中使用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()但这些都没有给我网格。当你点击Link按钮时，在控制台中的输出是goallist节点的内容是 "gridspace"，无论是在start()之前还是之后。
而事实上，对话框中显示的页面上，网格应该在 "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日更新
以下是我使用的版本。
值得一提的是，我是通过上传.tar.gz到Web服务器并解压来安装dgrid和dojo文件的，但我是通过下载.zip文件到我的Windows机器上，解压后用FTP复制到Web服务器上来安装dstore文件的。
我是在SiteBaker框架的背景下使用这些文件的，来自SiteBaker-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({
理论上，对话框应该放在窗口对象上，这样它就会在cal之前被渲染，以建立网格。但这也不行。
dgrid执行DOM维度计算，如果dgrid DOM不可见，则计算失败。听起来你的对话框就是这种情况。解决方案是调用 startup/renderArray 当dgrid DOM可见时。试着调用 grid.renderArray(gridData) 在对话框打开并可见后。