Question

简而言之，如何在表格中显示一个下拉菜单而不是在表格单元格内呈现？

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

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

Answer 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/

enter image description here

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

1 个答案: