Extjs 版本 6.X
单页面的多选,没有任何问题。
直接使用 Grid的配置项进行绑定即可获取:
xtype: 'grid', bind: { selection: '{checkedRecords}' },
但是如果grid采用分页处理,当我们翻到第二页时 是一个新store,数据就完全变了,即使翻回第一页也没有之前的勾选了,
所以,我们实现分页多选,就要记录之前的选择。
我们的方案是使用另一个容器记录所有的勾选,效果如下:
为了好的用户体验,要注意的地方:
1. 每次添加新数据时,要判断数据是否已经存在。
使用事件selectionchange,来添加新的勾选数据
Ext.Array.each(selected, function (item) { //如果勾选信息在右侧列表不存在,则添加 var isExist = Ext.Array.findBy(selectedRecords.items, function (r) { return item.get('Id') === r.get('Id'); }); if (!isExist) { selectedStore.add(item); // 保持所有数据为勾选状态 selectedGrid.getSelectionModel().selectAll(); } });
2. 从第2页翻回第1页时,要把第一页的勾选数据,勾选上。
在左侧store的load事件中,找到要勾选的数据,进行处理:
grid.getSelectionModel().select(result)
3. 删除勾选数据时,同时把表格的勾选数据也一并删除。
grid.getSelectionModel().deselect(store.indexOf(result), true);