如何在表格单元格上浮动 Dojo DropDownMenu答案

【问题标题】：How to float Dojo DropDownMenu over a table cell如何在表格单元格上浮动 Dojo DropDownMenu
【发布时间】：2012-11-20 20:50:35
【问题描述】：

简而言之，我怎样才能在表格上显示一个下拉菜单，而不是在表格单元格内呈现？

我正在使用此示例代码在表格单元格中显示下拉菜单：

window.someObj.showSocs = function(index){
  var pSubMenu = new DropDownMenu({});
  pSubMenu.addChild(new MenuItem({
    label: "Cut",
    iconClass: "dijitEditorIcon dijitEditorIconCut"
  }));
  pSubMenu.addChild(new MenuItem({
    label: "Copy",
    iconClass: "dijitEditorIcon dijitEditorIconCopy"
  }));
  pSubMenu.addChild(new MenuItem({
    label: "Paste",
    iconClass: "dijitEditorIcon dijitEditorIconPaste"
  }));

  pSubMenu.placeAt("socs-" + index.toString());
  pSubMenu.startup();
}

其中DropDownMenu 是"dijit/DropDownMenu" 而MenuItem 是"dijit/MenuItem"。

然后我使用此代码添加到表格单元格的链接（它在 dgrid renderCell 函数中执行，但我认为它与此问题无关）：

var link = document.createElement("a");
var linkText = "javascript:someObj.showSocs(" + index + ")";
link.setAttribute("href", linkText);
link.innerHTML = "DropNew";
td.appendChild(link);
td.setAttribute("id", "socs-" + index.toString());

现在，当我单击链接时，下拉菜单正在呈现，但在表格单元格内，而不是在其上方。这会导致当前表行扩展。我想这取决于我无法弄清楚的一些 CSS 属性。我没有覆盖任何 CSS 属性，所以我希望下拉列表自动放置在表格上而不是单元格内？

【问题讨论】：

标签： javascript css drop-down-menu dojo dgrid

【解决方案1】：

您将菜单的 DOM 节点放入单元格中，因此它会拉伸单元格。您可以将菜单放入<body> 并在dijit/place 的帮助下将其绝对定位在所需节点周围。

我会使用上下文菜单的内置功能，例如：

// var Menu = require("dijit/Menu");
var menu = new Menu({
    leftClickToOpen: true,
    targetNodeIds: ["table1"],
    selector: "a.dropNew"
});

查看实际操作：http://jsfiddle.net/phusick/TBWXL/

【讨论】：