<Wijmo Enterprise下載>

在上文中我們介紹了使用wijmo3的menu給flexgrid做右鍵菜單。本文我們就在這個基礎上，介紹如何動態的給flexgrid添加右鍵菜單。本文的右鍵菜單使用的是input.ListBox。

引用

本文使用wijmo5的ListBox作為右鍵菜單，除了必要的flexgrid文件，我們還需要在頁面引入input.js文件。代碼參考：

<!--ContextMenu-->
<script src="scripts/wijmo.input.min.js" type="text/javascript"></script>

動態創建ListBox

使用createContextMenu方法創建Dom元素，并且初始化為wijmo5的ListBox。代碼參考：

// create a context menu element using a ListBox control
function createContextMenu(options, callback) {
var menu = document.createElement('div'),
lb = new wijmo.input.ListBox(menu);
lb.itemsSource = options;
lb.selectedIndex = -1;
menu.addEventListener('click', function (e) {
menu.style.visibility = 'hidden';
callback(lb.selectedItem);
lb.selectedIndex = -1;
});
menu.addEventListener('keydown', function (e) {
if (e.keyCode == wijmo.Key.Escape) {
menu.style.visibility = 'hidden';
}
});
menu.addEventListener('blur', function (e) {
setTimeout(function () {
menu.style.visibility = 'hidden';
}, 300);
});
return menu;
}

調用createContextMenu方法創建右鍵菜單。代碼參考：

// create context menu
var menu = createContextMenu('New,Open,Close,Save,Save As,Exit'.split(','), function (option) {
alert('thanks for selecting option **' + option + '**');
});

右鍵彈出ListBox

獲取flexgrid的Dom元素，并且通過事件監聽，將Listbox在右鍵菜單的時候展示出來。

var element = document.getElementById('gsFlexGrid');
element.addEventListener('contextmenu', function (e) {
e.preventDefault();
showPopup(menu, e);
});

此處使用了showPopup方法，該方法控制Dom元素的展示和焦點。代碼如下：

// show an element as a popup
function showPopup(popup, ref) {

// make sure popup is a child of the body
if (!popup.parentElement) {
document.body.appendChild(popup);
}

// calculate popup position
var sz = popup.getBoundingClientRect(),
left = ref.clientX - sz.width / 2,
top = ref.clientY - sz.height / 2;

// make sure popup is visible
left = Math.max(0, Math.min(left, innerWidth - sz.width));
top = Math.max(0, Math.min(top, innerHeight - sz.height));

// show the popup
wijmo.setCss(popup, {
position: 'absolute',
left: left + pageXOffset,
top: top + pageYOffset,
visibility: 'visible'
});

// focus on the popup
popup.focus();
}

本文的演示效果如圖：

本文的演示代碼請下載：

PS: 關于ComponentOne，這些產品你可以關注>>

本文轉載自

葡萄城經典UI產品新年大促，驚喜折扣禮品送不停！優惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>