2012-11-20 4 views
0

Короче говоря, как я могу показать выпадающее меню, плавающее над таблицей, а не отображаемое внутри ячейки таблицы?Как плавать Dojo DropDownMenu над ячейкой таблицы

Я использую этот пример кода, чтобы показать выпадающее меню внутри ячейки таблицы:

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, поэтому я ожидаю, что выпадающее меню будет помещено поверх таблицы, а не внутри ячейки автоматически?

ответ

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/

enter image description here

+0

Вау, большое, большое спасибо! – Amiramix

Смежные вопросы