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 に答える