JQuery MiniUI development tutorial table control table: Right-click menu (15th)

Reference example: Right-click the menu

1. Create a ContextMenu

<Ul id = "gridMenu" class = "mini-contextmenu" onbeforeopen = "onBeforeOpen">
<Li name = "add" iconCls = "icon-add" onclick = "onAdd"> add </li>
<Li name = "edit" iconCls = "icon-edit" onclick = "onEdit"> edit a node </li>
<Li name = "remove" iconCls = "icon-remove" onclick = "onRemove"> delete a node </li>
</Ul>

2. Set the table contextmenu

<Div id = "datagrid1" class = "mini-datagrid"
ContextMenu = "# gridMenu">
......
</Div>

Iii. Monitoring beforeopen events

Listen to the beforeopen event of the right-click menu to precisely control the right-click menu.

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;
// Disable the default context menu of the browser
E.html Event. 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 ();
}

}

4. headerContextMenu

Create the same menu object and set it to the headerContextMenu attribute of the table.