如何从单元格上下文菜单访问(增强的)网格单元格数据

How to access (enhanced-) grid cell data from a cell context menu?

本文关键字：单元格 增强的 网格 数据 菜单 上下文 访问      更新时间：2023-09-26

我的web应用程序是基于dojo 1.6.0。我所遇到的问题基本上是基于事件处理程序和/或它们的利用率dojos中的"dojox.grid."EnhancedGrid"图书馆。

我的应用程序包含一个dojox增强网格与大量的行。(100 +)

这个增强的网格使用"cellMenu"插件来显示上下文菜单为每个网格单元格右键单击。

我的目标是使用上下文菜单"智能"选择行。

例如:

用户右键单击位于"lastname"列中的值为"miller"的单元格。然后点击上下文菜单中的"智能选择"。然后，应用程序将遍历行数据并选择"miller"为"lastname"的所有行。在此之后，用户将通过按下按钮来启动对所选行的操作。

下面是一个小的源代码示例，说明了使用上下文菜单实现增强网格可视化的声明式方法:

<table dojoType="dojox.grid.EnhancedGrid" plugins="{cellMenu:'myMenu'}">
<div id="myMenu" dojoType="dijit.Menu">
  <div id="mi1" dojoType="dijit.MenuItem">Do something with this cell</div>
  <div id="mi2" dojoType="dijit.MenuItem">Do something else with this cell</div>
</div>
<thead>
  definition of columns
</thead>
</table>

动作代码与js-Files中的可视化分开处理:

<script type="text/javascript">
dojo.addOnLoad(function(){
  dojo.connect(dijit.byId('mi1'),'onClick',function(event){ 
    //Use Data from the cell clicked to do something
  });
  dojo.connect(dijit.byId('mi2'),'onClick',function(event){
    //Use Data from the cell clicked to do something else
  });
});
</script>

我是dojo新手，没有处理EnhancedGrid的经验。

所以我的问题是:

当我点击里面的上下文菜单，这是一个"dijit。菜单"onClick"事件"dijit"。菜单项"被触发。

在这个事件处理程序中，我需要读取上下文菜单中"网格单元格"的内容打开了，但我没有(或目前不知道)一种方法来获取"网格单元"的引用。

使用默认策略，我可能能够获得对MenuItem的引用，并从那里可能到菜单，但我无法找到包含对"网格单元格"引用的属性或行/列ID，这将使我能够访问单击的单元格。

由于上下文菜单的存在是为了对右键打开的"项目"做一些事情，我认为必须有一种方法(按照设计师的意思)来访问这个"项目"。

我还没有找到说明这一点的文档或示例，非常感谢您的帮助。

这里有一个可能的解决方案(也许不是最好的)在dojo网格上使用上下文菜单进行选择:

Visual Part (Declarative)

<table id="grid" dojoType="dojox.grid.EnhancedGrid"
  plugins="{indirectSelection:true,menus:{cellMenu:'GridCellMenu'}}">
  <div dojoType="dijit.Menu" id="GridCellMenu" style="display:none;">
    <div dojoType="dijit.MenuItem" id="mi_selectSimilar">select similar items</div>
    <div dojoType="dijit.MenuItem" id="mi_deSelectSimilar">DEselect similar items</div>
  </div>
  <thead>
    <tr>
      <th field="id">ID</th>
      <th field="lastname">Lastname</th>
      <th field="firstname>firstname</th>
    </tr>
  </thead>
</table>
JavaScript背景

// Stylesheets and Dojo Groundwork are neglected in this example
<script type="text/javascript">
  dojo.require('dijit.Menu');
  dojo.require('dijit.MenuItem');
  dojo.require('dojox.grid.EnhancedGrid');
  dojo.require('dojox.grid.enhanced.plugins.IndirectSelection');
  dojo.require('dojox.grid.enhanced.plugins.Menu');
  var currentEvent = null;
  var fn_selectSimilar = function(){
    var data = currentCell.grid.store.objectStore.data;
    dojo.forEach(data,function(row,idx){
      if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
        currentEvent.cell.grid.selection.addToSelection(idx);
      }
    }
  }
  var fn_deSelectSimilar = function(){
    var data = currentEvent.cell.grid.store.objectStore.data;
    dojo.forEach(data,function(row,idx){
      if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
        currentEvent.cell.grid.selection.deselect(idx);
      }
    }
  }
  dojo.addOnLoad(function(){
    dojo.connect(dijit.byId('grid'),"onCellContextMenu",function(e){
      currentEvent = e;
    });
    dojo.connect(dijit.byId('mi_selectSimilar'),"onClick",fn_selectSimilar);
    dojo.connect(dijit.byId('mi_deSelectSimilar'),"onClick",fn_deSelectSimilar);
  });
</script>

这将遍历网格中所有选中的项，并获得名为"YourGridColumnName"的单元格的值。

var items = YourDataGridId.selection.getSelected();
if (items.length) {
    dojo.forEach(items, function(selectedItem) {
        alert(YourDataGridId.store.getValues(selectedItem, "YourGridColumnName"));
    })
}

希望能有所帮助。

您可以将事件处理程序链接到将弹出上下文菜单的鼠标和键盘事件。事件有一个行索引，您可以将其存储在菜单项可以找到它的地方。

相关文章：