Grid 取消选中 在 MultiRange 模式下的一些问题

首先是在调用 select(-1, -1) 来取消表格选中效果时，浏览器的控制台会报 期望值为正数 的错误，并且当selectedMode为MultiRange时，按住Ctrl跨行选中多个单元格后，调用 select(-1, -1)，并不能将表格的所有选中单元格取消选中

您好，MultiRange在V2020新版本中有了原生实现，这个问题需要一些时间来调研，

大概明天中午前能够给你回复，谢谢~
——————————————————————————————————————————————

您好，这个问题已经找到解决方案，请将以下代码复制到链接示例的app.js中即可看到效果：

https://www.grapecity.com/wijmo/demos/Grid/Selection/MultipleSelection/purejs

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import { glbz, isNumber, saveFile } from '@grapecity/wijmo';
   
5. import { FlexGrid, SelectionMode, CellRange } from '@grapecity/wijmo.grid';
   
6. document.readyState === 'complete' ? init() : window.onload = init;
   
7. function init() {
   
8.     // create some random data
   
9.     var data = [];
   
10.     var countries = 'Austria,Belgium,Chile,Denmark,Finland,Japan,UK'.split(',');
    
11.     for (var i = 0; i < 300; i++) {
    
12.         data.push({
    
13.             id: i,
    
14.             from: countries[i % countries.length],
    
15.             to: countries[(i + 1) % countries.length],
    
16.             sales: Math.random() * 10000,
    
17.             expenses: Math.random() * 5000,
    
18.             amount: Math.random() * 10000,
    
19.             extra: Math.random() * 10000,
    
20.         });
    
21.     }
    
22.     // show the data in a grid
    
23.     var theGrid = new FlexGrid('#theGrid', {
    
24.         alternatingRowStep: 0,
    
25.         showMarquee: true,
    
26.         showSelectedHeaders: 'All',
    
27.         anchorCursor: true,
    
28.         selectionMode: SelectionMode.MultiRange,
    
29.         itemsSource: data,
    
30.         // update aggregate display when selection changes
    
31.         selectionChanged: (s, e) => {
    
32.             // calculate aggregates
    
33.             let agg = { cnt: 0, cntAll: 0, sum: 0, avg: 0, cells: {} };
    
34.             s.selectedRanges.forEach(rng => {
    
35.                 aggregateRange(s, agg, rng);
    
36.             });
    
37.             // update the display using template literals
    
38.             let msg = (agg.cnt > 1) ? glbz `Count: <b>${agg.cntAll}:n0</b>\tAverage: <b>${agg.avg}:g4\tSum: <b>${agg.sum}:g4</b>`
    
39.                 : (agg.cntAll > 1) ? glbz `Count: <b>${agg.cntAll}:n0</b>`
    
40.                     : 'Ready';
    
41.             // update the display using wijmo.format
    
42.             //let msg = (agg.cnt > 1) ? format('Count: <b>{cntAll:n0}</b>\tAverage: <b>{avg:g4}</b>\tSum: <b>{sum:g4}</b>', agg)
    
43.             //    : (agg.cntAll > 1) ? format('Count: <b>{cntAll:n0}</b>', agg)
    
44.             //    : 'Ready';
    
45.             document.getElementById('mr-aggregates').innerHTML = msg;
    
46.         }
    
47.     });
    
48.     // update aggregates for a range
    
49.     function aggregateRange(grid, agg, rng) {
    
50.         for (let r = rng.topRow; r <= rng.bottomRow; r++) {
    
51.             for (let c = rng.leftCol; c <= rng.rightCol; c++) {
    
52.                 let key = r + ',' + c;
    
53.                 if (!agg.cells[key]) { // account for overlapping ranges
    
54.                     agg.cells[key] = true;
    
55.                     let data = grid.getCellData(r, c, false);
    
56.                     if (isNumber(data)) { // handle numbers
    
57.                         agg.cnt++;
    
58.                         agg.sum += data;
    
59.                     }
    
60.                     if (data != '' && data != null) { // handle non-empty cells
    
61.                         agg.cntAll++;
    
62.                     }
    
63.                 }
    
64.             }
    
65.         }
    
66.         agg.avg = agg.cnt > 0 ? agg.sum / agg.cnt : 0;
    
67.     }
    
68.     // export grid or selection to CSV
    
69.     document.getElementById('btn-csv-grid').addEventListener('click', () => {
    
70.         var selMode = theGrid.selectionMode;
    
71.         if(selMode == SelectionMode.MultiRange){
    
72.             var grid = theGrid;
    
73.             grid.selectedRanges.forEach(sr => {
    
74.                 sr.setRange(-1, -1, -1, -1);
    
75.             });
    
76.             grid.select(-1, -1);
    
77.             grid.refresh();
    
78.         }else{
    
79.             theGrid.select(-1,-1);
    
80.             // 另一种方法：
    
81.             //theGrid.collectionView.currentItem=null;
    
82.         }
    
83.     });
    
84.     document.getElementById('btn-csv-sel').addEventListener('click', () => {
    
85.         var csv = theGrid.getClipString(null, true, true);
    
86.         saveFile(csv, 'FlexGridSelection.csv');
    
87.     });
    
88. }
    

复制代码