Dojo DataGrid 上下文菜单 onRowContextMenu 即使在 DataGrid 的空白区域中单击鼠标右键也会显示答案

【问题标题】：Dojo DataGrid Context Menu onRowContextMenu displays even when right-clicking in BLANK area of DataGridDojo DataGrid 上下文菜单 onRowContextMenu 即使在 DataGrid 的空白区域中单击鼠标右键也会显示
【发布时间】：2012-01-01 12:40:42
【问题描述】：

我有一个包含项目的 DataGrid。当您右键单击其中一行时，会显示一个 Dojo 上下文菜单，其中包含删除该行的选项。如果您尝试右键单击 DataGrid 的空白区域，则不会显示上下文菜单....但是，如果您首先右键单击一行，然后单击取消菜单选项（什么都不做），或者如果您左键单击页面上的其他位置（隐藏上下文菜单）并右键单击 DataGrid 的空白区域，显示上下文菜单，如果您单击上下文菜单中的删除项目选项，它会删除您右键单击的最后一项。

为什么当您在 DataGrid 的 空白区域 中单击鼠标右键时显示上下文菜单，但只有之后您已经右键单击了数据网格？

任何提示将不胜感激。到目前为止，这是我的代码：

var selectedItem;  // This has to be declared "globally" outside of any functions

function onRowContextMenuFunc(e) {
    grid5_rowMenu.bindDomNode(e.grid.domNode);
    selectedItem = e.grid.getItem(e.rowIndex);
}

function gridRowContextMenu_onClick(e) {
    store3.deleteItem(selectedItem);
}

<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;">
    <div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Delete</div>
    <div dojoType="dijit.MenuItem">Cancel</div>
</div>

<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>

【问题讨论】：

标签： dojo contextmenu right-click dojox.grid dojox.grid.datagrid

【解决方案1】：

好吧，我不完全确定为什么它只在第一次右键单击一个项目后才允许在空白区域中右键单击时显示上下文菜单，但我确实想出了一个解决方法来解决我的根本问题：右键单击数据网格中的行项目，然后单击关闭以隐藏上下文菜单，然后右键单击数据网格的空白区域并选择菜单项会导致第一次右键单击的 rowIndex待通过

这是我的代码；我希望这对以后遇到同样问题的人有所帮助：

 var selectedItem;

 function onRowContextMenu(e) {
      grid5_rowMenu.bindDomNode(e.grid.domNode);
      selectedItem = e.grid.getItem(e.rowIndex);
 }

 function gridRowContextMenuExecute(task) {
      if((task == "remove") && (selectedItem != null)) {
           store3.deleteItem(selectedItem);
      }
      else {
           selectedItem = null;
      }
 }

 <div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;" onBlur="gridRowContextMenuExecute('cancel')">
      <div dojoType="dijit.MenuItem" onMouseDown="gridRowContextMenuExecute('remove')">Remove from Transaction</div>
      <div dojoType="dijit.MenuItem">Cancel</div>
 </div>

 <div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenu"></div>

【讨论】：

【解决方案2】：

grid5_rowMenu 是一个菜单。

e.grid.domNode是数据网格的DOM节点。

*grid5_rowMenu.bindDomNode(e.grid.domNode);*

它是：将上下文菜单提供给网格（DOM 节点内的任何位置）。

因为datagrid中的内容总是变化的，所以很难将菜单分配给grid里面的元素。

如果你的网格没有改变它的内容，你可以这样做： *grid5_rowMenu.bindDomNode(e.target.parentElement);*

【讨论】：