Extjs 分页多选的实现

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