是否有带有上下文菜单的 dojo 增强网格示例

Posted 2023-02-16

【中文标题】是否有带有上下文菜单的 dojo 增强网格示例

【英文标题】：Is there a dojo enhanced grid example with context menu

【发布时间】：2010-04-17 21:09:05

【问题描述】：

我正在寻找一个 dojo 增强网格的示例，该网格在访问单元格或行数据的单元格或行菜单上包含上下文菜单。我设法用行上下文菜单创建了一个增强的网格。我可以创建一个函数来捕获单击行菜单项的事件。但是，我不确定如何在菜单项处理程序的上下文中访问行数据。在夜间构建的测试中，我没有看到任何示例。网上有这方面的例子吗？

【问题讨论】：

您能解释一下您是如何捕获事件中的行号的吗？因为我还没有看到怎么做。谢谢。

【参考方案1】：

我也有类似的问题。我想创建一个上下文菜单，允许用户从数据网格中删除他们右键单击的项目并从数据存储中删除该项目。认为这应该很简单，在您的帮助和其他一些网站的帮助下，我想出了以下代码。

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>

当然，如果您以编程方式创建 DataGrid，您只需将 onRowContextMenu: onRowContextMenuFunc 添加到您的声明中。

【讨论】：

编辑：上面的代码有一些问题，它允许用户右键单击一行，然后单击取消或隐藏上下文菜单，然后右键单击数据的空白区域网格并单击删除菜单选项，它将删除之前右键单击的项目。如果你有同样的问题，请查看我修改后的代码HERE

【参考方案2】：

我想通了。甚至在行上下文菜单上，将行号捕获到全局中。甚至在菜单项上单击时，从全局检索行，然后使用它在网格中查找行的内容。我一直在使用这种方法，效果很好。

【参考方案3】：

以下是从上下文菜单中访问所选行的方法：

// First create a menu object to hold the various menus
var menusObject = 
    //  headerMenu: new dijit.Menu(),
rowMenu: new dijit.Menu()//,
//  cellMenu: new dijit.Menu(),
//   selectedRegionMenu: new dijit.Menu()
;

添加菜单项

menusObject.rowMenu.addChild(new dijit.MenuItem(
    label: "Show me data",
    onClick: function(e)
        console.log(this.selectedRow)
    
));

menusObject.rowMenu.startup();

创建网格

var grid = new dojox.grid.EnhancedGrid(
    store : store,
structure : layout,
rowsPerPage: 10,
escapehtmlInData: false,
plugins: 
    menus: menusObject

, 'some are to place');

// 激活从数据网格行向菜单项发送消息

dojo.connect(grid, 'onRowContextMenu', function(e)

    // Set the "selectedItem" property of all of the menu items of a menu.  This lets you reference the row data!!

    var menuChildren = menusObject.rowMenu.getChildren();
    for(var i = 0; i<menuChildren.length; i++)
        menuChildren[i].selectedRow = this.getItem(e.rowIndex);
    
);