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

Question

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

Answer 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 添加到您的声明中。

Answer 2

我想通了。甚至在行上下文菜单上，将行号捕获到全局中。即使单击菜单项，也可以从全局检索该行，然后使用它在网格中查找该行的内容。我一直在使用这个方法并且效果非常好。

Answer 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);
    }
});