0

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

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

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 属性，所以我希望下拉列表自动放置在表格上而不是单元格内？

4

1 回答 1

3

您将菜单的 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/

在此处输入图像描述

于 2012-11-21T14:49:02.670 回答