如何将 div 添加到 Dialog？答案

【问题标题】：How to add a div to a Dialog?如何将 div 添加到 Dialog？
【发布时间】：2017-12-14 12:39:16
【问题描述】：

我创建了一个 dijit/form/Button 并将其添加到我的页面。当我按下按钮时，例如应该有一个带有数据和其他按钮的 dataGrid 以获得更多功能。我创建了一个新表单并添加了一个下拉菜单和一些其他按钮。现在我想在这个表单中添加一个 dataGrid 或 dataGrid 的第二个表单。这怎么可能？下面是代码示例：

var form = new Form({ 
    style: 'height: 100px'
});

new DropDownButton({
    dropDown: menu,
    label: "layers"
}).placeAt(form.containerNode);

var menu = new DropDownMenu({ style: "display: none" });

var menuItem1 = new MenuItem({
    label: "test",
    onClick: function () { alert("test"); }
});

menu.addChild(menuItem1);

new Button({
    label: "OK"
}).placeAt(form.containerNode);

new Button({
    label: "Cancel"
}).placeAt(form.containerNode);

dialog = new Dialog ({
    content: form,
    title: 'Title',
});

form.startup();

当我添加 form2 时，只显示第一个，而不显示 form 和 form2。如何将 dataGrid 或 dataGrid 的第二个表单添加到带有按钮的第一个表单。也许我应该向 DOM 添加一个新的 div。但是如何将新的 div 添加到 DOM 到按钮中？

【问题讨论】：

你用的是什么框架？
我正在使用 .NET
您是如何添加form2 的？“仅显示第一个，而不显示form 和form2”是什么意思？ form不是第一个吗？
一个相当令人困惑的问题。我会说您不需要表单（我想您的意思是dijit/form/Form？）来包含小部件或其他内容。 Form 基本上是一个 <form> 元素，当您将 POST 内容发送到后端时它很有用。 dijit/Dialog 创建包含 containerNode div 的 DOM 节点，您的 content 将放置在其中，您可以在其中添加任何您想要的内容，但它必须都是该单个 div 的子节点，例如将您的两个表单作为子节点附加到它。您的DropDownMenu 似乎与您的问题无关。

标签： javascript dojo

【解决方案1】：

我尝试了form2如下：

var form = new Form({ 
style: 'height: 100px'
});

var form2 = new Form({
style: 'height: 100px'
});

var layout = [
{name: 'ID'},
{name: 'test'}
];

var grid = new DataGrid({
structure: layout
}).placeAt(form2.containerNode);

new DropDownButton({
dropDown: menu,
label: "layers"
}).placeAt(form.containerNode);

var menu = new DropDownMenu({ style: "display: none" });

var menuItem1 = new MenuItem({
label: "test",
onClick: function () { alert("test"); }
});

menu.addChild(menuItem1);

new Button({
label: "OK"
}).placeAt(form.containerNode);

new Button({
label: "Cancel"
}).placeAt(form.containerNode);

dialog = new Dialog ({
content: form,
title: 'Title',
});

form.startup();
form2.startup();

现在我不确定如何将 form2 添加到对话框的内容中。

【讨论】：

最好将其添加为对原始问题的编辑，而不是对其的回答。

【解决方案2】：

说实话，您最好将代码构建为自定义小部件，但看起来您处于学习曲线的早期阶段。这是一个向现有对话框添加内容的小示例。

如果我理解正确的话，您的 DataGrid 的详细信息（您知道 dgrid http://dgrid.io 几乎已弃用，对吗？）和 DropDownMenus 与您的原始问题无关。

require([
  'dijit/Dialog',
  'dijit/form/Form',
  'dijit/form/Button'
], function (Dialog, Form, Button) {
  
  document.body.className = 'claro';
  
  var form = new Form();
  
  var b1 = new Button({
    label: 'Click me'
  });
  
  b1.placeAt(form.domNode);
  
  b1.on('click', function () {
  
    // Now create some new content for the Dialog.
    // We have closure scope visibility of the dialog reference
    var form2 = new Form();
    var b2 = new Button({
      label: 'I am a second button (I do nothing)'
    });
    
    // Append the new content as children of the dialog's content
    dialog.containerNode.appendChild(b2.domNode);
  });
  
  var dialog = new Dialog({
    title: 'A dialog',
    content: form
  });
  dialog.startup();
  dialog.show();
});

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

【讨论】：