如何处理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
相关产品推荐
相关产品推荐

