You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何处理Dojo间接选择(indirectSelection)的勾选事件?

处理dojox.grid.EnhancedGrid间接选择的勾选事件

没问题,要处理你这个带indirectSelection插件的EnhancedGrid的勾选事件其实很简单——这个插件只是提供了可视化的勾选框,实际的选择状态是由网格的selection模块管理的,所以我们只需要监听网格的选择相关事件即可。下面给你两种常用的实现方式:

方式一:监听单行列的勾选/取消事件

如果你需要针对每一行的勾选/取消操作做单独处理,可以监听网格的onRowSelected和onRowDeselected事件,这两个事件会在用户勾选或取消勾选某一行时触发,并且能拿到对应的行索引:

// 先完成网格的创建与渲染(你的原有代码)
var table = new dojox.grid.EnhancedGrid({
    store: catalogLayout,
    structure: layout,
    id: "poolGrid",
    styles: "text-align: center",
    plugins: {indirectSelection: true}
}, document.createElement("div"));

var contentNode = dojo.byId("contentNode");
contentNode.appendChild(table.domNode);
table.startup();

// 绑定行选中事件
table.onRowSelected = function(rowIndex) {
    // 获取当前选中行的数据项
    var rowItem = this.getItem(rowIndex);
    // 替换成你需要的字段名,获取对应数据
    var rowData = this.store.getValue(rowItem, "yourFieldName");
    
    console.log(`第${rowIndex}行被勾选,数据:`, rowData);
    // 在这里添加你的业务处理逻辑
};

// 绑定行取消选中事件
table.onRowDeselected = function(rowIndex) {
    var rowItem = this.getItem(rowIndex);
    var rowData = this.store.getValue(rowItem, "yourFieldName");
    
    console.log(`第${rowIndex}行被取消勾选,数据:`, rowData);
    // 在这里添加你的业务处理逻辑
};

方式二:监听选择集变化事件

如果需要处理批量勾选/取消的场景(比如点击全选框),可以监听selection对象的onChange事件,这个事件会在整个选择集合发生变化时触发,你可以一次性获取所有选中的行:

// 同样先完成网格的创建与渲染
var table = new dojox.grid.EnhancedGrid({
    store: catalogLayout,
    structure: layout,
    id: "poolGrid",
    styles: "text-align: center",
    plugins: {indirectSelection: true}
}, document.createElement("div"));

var contentNode = dojo.byId("contentNode");
contentNode.appendChild(table.domNode);
table.startup();

// 监听选择集变化事件
table.selection.onChange = function() {
    // 获取所有选中行的索引数组
    var selectedRowIndices = table.selection.getSelected();
    
    console.log("当前选中的行索引:", selectedRowIndices);
    
    // 遍历选中行,获取每一行的数据
    selectedRowIndices.forEach(function(index) {
        var rowItem = table.getItem(index);
        var rowData = table.store.getValue(rowItem, "yourFieldName");
        console.log(`选中行数据:`, rowData);
    });
    
    // 在这里添加批量选择的业务逻辑
};

注意事项(针对Dojo 1.7+ AMD语法)

如果你的项目使用了AMD模块规范,推荐使用dojo/on模块来绑定事件,写法更规范:

require(["dojo/on", "dojo/dom"], function(on, dom) {
    // 创建网格
    var table = new dojox.grid.EnhancedGrid({
        store: catalogLayout,
        structure: layout,
        id: "poolGrid",
        styles: "text-align: center",
        plugins: {indirectSelection: true}
    }, document.createElement("div"));

    var contentNode = dom.byId("contentNode");
    contentNode.appendChild(table.domNode);
    table.startup();

    // 用on模块绑定事件
    on(table, "rowSelected", function(rowIndex) {
        // 处理选中逻辑
    });

    on(table, "rowDeselected", function(rowIndex) {
        // 处理取消选中逻辑
    });
});

内容的提问来源于stack exchange,提问作者Cosmin Oprea

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 03:33:37