Javascript 如何从单元格上下文菜单访问(增强型)网格单元格数据?
我的web应用程序基于dojo 1.6.0。 我遇到的问题基本上是基于事件处理程序和/或它们的利用率 在dojos“dojox.grid.EnhancedGrid”库中 我的应用程序包含一个具有大量行的dojox增强型网格。(100+) 这个增强的网格使用“cellMenu”插件来显示上下文菜单 对于每个网格单元,单击鼠标右键 我的目标是使用上下文菜单“智能”选择行 例如: 用户右键单击位于列“lastname”中且值为“miller”的单元格。然后单击上下文菜单中的“智能选择”。 然后,应用程序将在行数据上循环,并选择所有将“miller”作为“lastname”的行。 之后,用户将通过按下按钮来启动所选行的操作 下面是一个小的源代码示例,演示了使用上下文菜单可视化增强网格的声明性方法:Javascript 如何从单元格上下文菜单访问(增强型)网格单元格数据?,javascript,contextmenu,dojo,dojox.grid,Javascript,Contextmenu,Dojo,Dojox.grid,我的web应用程序基于dojo 1.6.0。 我遇到的问题基本上是基于事件处理程序和/或它们的利用率 在dojos“dojox.grid.EnhancedGrid”库中 我的应用程序包含一个具有大量行的dojox增强型网格。(100+) 这个增强的网格使用“cellMenu”插件来显示上下文菜单 对于每个网格单元,单击鼠标右键 我的目标是使用上下文菜单“智能”选择行 例如: 用户右键单击位于列“lastname”中且值为“miller”的单元格。然后单击上下文菜单中的“智能选择”。 然后,应用程
<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文件中的可视化分开处理:
<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.addOnLoad(函数(){
connect(dijit.byId('mi1'),'onClick',函数(事件){
//使用单击的单元格中的数据执行某些操作
});
connect(dijit.byId('mi2'),'onClick',函数(事件){
//使用单击的单元格中的数据执行其他操作
});
});
我对dojo比较陌生,没有处理EnhancedGrid的经验
所以我的问题是:
当我在“dijit.menu”上下文菜单中单击时,“onClick”事件
触发其中包含的“dijit.MenuItem”的
在这个事件处理程序中,我需要读取上下文菜单中“网格单元”的内容
已于打开,但我没有(或目前不知道)获取“网格单元”引用的方法
使用默认策略,我可能能够获取对菜单项的引用,也可能从菜单项中获取对菜单的引用,但我无法找到包含对“网格单元格”的引用的属性或允许我访问单击的单元格的行/列ID
由于上下文菜单是用来处理通过右键单击打开的“项目”的,我认为必须有一种方法(正如设计者所说)来访问该“项目”
我还没有找到说明这一点的文档或示例,非常感谢您的帮助。这将遍历网格中所有选定的项目,并获取名为“YourGridColumnName”的单元格的值
希望有帮助。您可以将事件处理程序链接到鼠标和键盘事件中,从而打开关联菜单。事件有一个行索引,您可以将其存储在菜单项将找到它的位置。以下是一个可能的解决方案(可能不是最好的),用于在dojo网格上使用上下文菜单进行选择: 可视部分(声明性)
选择类似的项目
取消选择类似项目
身份证件
姓氏
不幸的是,列名是我无法检索到的内容之一。此外,右键单击的单元格(用于上下文菜单)也未选中。我的目标是从右键单击的单元格中检索值,并根据上下文菜单中的用户选择选择具有相似项的行。我将使用dojox.grid.DataGrid,并使用onRowContextMenu事件,而不是增强的数据网格。此提示将引导我进入EnhancedGrid的onCellContextMenu。这可能是我至今错过的谜题。我认为上下文菜单的menuitem click事件没有与clicked元素相关的内置元素,这很奇怪。如果上下文菜单(尤其是增强网格的单元格上下文菜单)与单元格不相关,那么它有什么意义?我现在只了解dojo事件处理的基础知识。如何将“链接到”现有事件连接,还是说独立于现有“菜单打开事件”的并行事件连接?您如何存储该值以允许菜单项访问它-我可能只使用一个全局变量,在我看来它不是很优雅。这个答案最接近我最终实现的解决方案,尽管drcelus和他的评论给了我最终的想法。
var items = YourDataGridId.selection.getSelected();
if (items.length) {
dojo.forEach(items, function(selectedItem) {
alert(YourDataGridId.store.getValues(selectedItem, "YourGridColumnName"));
})
}
<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>
// 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>