如何基于行索引删除Dojo EnhancedGrid中的对应行？

我来帮你搞定这个每行末尾添加删除按钮并实现删除功能的需求，咱们一步步调整代码：

1. 修正删除按钮的Formatter函数 #

原来的deleteButton函数没有利用到Dojo Grid Formatter提供的行索引参数，而且字符串转义的写法也没必要。我们直接修改它，让它能传递当前行的索引：

function deleteButton(value, rowIndex) {
    // 返回一个普通HTML按钮，点击时传递行索引给删除函数
    return `<button style="border:none; background:none; cursor:pointer;" onclick="removeItem(${rowIndex})">
                <img src='delete.png' width='18' height='18' alt='Delete this row'>
            </button>`;
}

这里用普通HTML按钮是为了避免dijit Widget解析的额外复杂度，如果你非要用dijit的Button，需要额外做Widget解析处理，普通按钮足够满足需求。

同时，调整Grid结构里的Delete列配置，因为不需要绑定数据字段，所以field可以留空，再加上固定宽度避免挤压其他列：

{ label: "", field: "", formatter: deleteButton, width: "50px" }

2. 实现删除行的核心函数 #

接下来编写removeItem函数，通过行索引获取对应的数据项，然后从Store中删除并刷新Grid：

function removeItem(rowIndex) {
    // 通过Grid实例获取对应行的数据项
    var targetItem = grid.getItem(rowIndex);
    if (!targetItem) return;

    // 从ObjectStore中删除该数据项，用异步回调处理结果
    grid.store.remove(targetItem.id)
        .then(function() {
            // 删除成功后刷新Grid，更新视图
            grid.refresh();
        }, function(error) {
            console.error("删除行失败:", error);
        });
}

这里用到了Dojo Store的异步API，确保操作的可靠性。需要注意你的数据项必须包含id字段（或者你在MemoryStore初始化时指定了idProperty为其他字段，那就替换成对应的字段名）。

3. 调整Grid初始化的细节 #

确保你的底层MemoryStore正确配置了唯一标识字段，比如如果你的数据用id作为唯一标识，初始化时可以这样写：

var objectStoreMemory = new Memory({
    data: [/* 你的数据数组 */],
    idProperty: "id" // 确保这里和你的数据字段匹配
});
var dataStore = new ObjectStore({objectStore: objectStoreMemory});

完整的代码整合 #

把这些修改整合到你的原有代码中，最终的Grid初始化和相关函数如下：

// 假设你已经正确引入了Dojo相关模块：dojo/store/Memory, dojo/data/ObjectStore, dojox/grid/EnhancedGrid等

var objectStoreMemory = new Memory({
    data: [
        { id: 1, Country: "China", Abbreviation: "CN", Capital: "Beijing" },
        { id: 2, Country: "USA", Abbreviation: "US", Capital: "Washington" }
        // 更多数据...
    ],
    idProperty: "id"
});
var dataStore = new ObjectStore({objectStore: objectStoreMemory}); 

// Grid初始化（确保grid变量在removeItem能访问到的作用域内）
var grid;
grid = new EnhancedGrid({ 
    selectable: true, 
    store: dataStore, 
    structure : [ 
        { name : "Country", field : "Country", width : "150px", reorderable: false, editable : true }, 
        { name : "Abbreviation", field : "Abbreviation", width : "120px", reorderable: false, editable : true }, 
        { name : "Capital", field : "Capital", width : "100%", reorderable: false, editable : true }, 
        { label: "", field: "", formatter: deleteButton, width: "50px" }
    ], 
    rowSelector: '20px', 
    plugins: { 
        pagination: { 
            pageSizes: ["10", "25", "50", "100"], 
            description: true, 
            sizeSwitch: true, 
            pageStepper: true, 
            gotoButton: true, 
            maxPageStep: 5, 
            position: "bottom" 
        } 
    } 
}, "grid"); 
grid.startup();

// 删除按钮Formatter函数
function deleteButton(value, rowIndex) {
    return `<button style="border:none; background:none; cursor:pointer;" onclick="removeItem(${rowIndex})">
                <img src='delete.png' width='18' height='18' alt='Delete this row'>
            </button>`;
}

// 删除行函数
function removeItem(rowIndex) {
    var targetItem = grid.getItem(rowIndex);
    if (!targetItem) return;

    grid.store.remove(targetItem.id)
        .then(function() {
            grid.refresh();
        }, function(error) {
            console.error("删除行失败:", error);
        });
}

注意事项 #

• 确保grid变量在removeItem函数的作用域内可访问，要么声明为全局变量，要么用闭包封装。
• 如果你的数据没有id字段，记得在MemoryStore初始化时指定idProperty为你数据中的唯一标识字段（比如Country或者自定义字段）。
• 分页插件会自动处理删除后的页码调整，比如当前页只剩一行时，删除后会自动跳转到上一页。

内容的提问来源于stack exchange，提问作者Ajay Kumar