jQuery MiniUI 開發教程 表格控制項 表格：右鍵菜單（十五）

                  
參考樣本：右鍵菜單

           
         
一：建立ContextMenu

<ul id="gridMenu" class="mini-contextmenu" onbeforeopen="onBeforeOpen">             
    <li name="add" iconCls="icon-add" onclick="onAdd">新增</li>
    <li name="edit" iconCls="icon-edit" onclick="onEdit">編輯節點</li>
    <li name="remove" iconCls="icon-remove" onclick="onRemove">刪除節點</li>       
</ul>

          
二：設定表格contextmenu

<div id="datagrid1" class="mini-datagrid"
    contextMenu="#gridMenu">
    ......
</div>  

          
三：監聽beforeopen事件         

監聽右鍵菜單的beforeopen事件，可以對右鍵菜單精確控制。

function onBeforeOpen(e) {
    var grid = mini.get("datagrid1");
    var menu = e.sender;
           
    var row = grid.getSelected();
    var rowIndex = grid.indexOf(row);           
    if (!row ||  rowIndex== 0) {
        e.cancel = true;
        //阻止瀏覽器預設右鍵菜單
        e.htmlEvent.preventDefault();
        return;
    }
    ////////////////////////////////
    var editItem = mini.getbyName("edit", menu);
    var removeItem = mini.getbyName("remove", menu);
    editItem.show();
    removeItem.enable();

    if (rowIndex == 1) {
        editItem.hide();
    }
    if (rowIndex == 1) {
        removeItem.disable();
    }

}

          
四：表頭菜單headerContextMenu

 建立同樣一個menu菜單對象，設定給表格的headerContextMenu屬性即可。