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

KevinChen

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

KevinChen · KevinChen

本帖最后由 KevinChen 于 2020-5-15 16:48 编辑

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

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

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

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

import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import { glbz, isNumber, saveFile } from '@grapecity/wijmo';
import { FlexGrid, SelectionMode, CellRange } from '@grapecity/wijmo.grid';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
// create some random data
var data = [];
var countries = 'Austria,Belgium,Chile,Denmark,Finland,Japan,UK'.split(',');
for (var i = 0; i < 300; i++) {
data.push({
id: i,
from: countries[i % countries.length],
to: countries[(i + 1) % countries.length],
sales: Math.random() * 10000,
expenses: Math.random() * 5000,
amount: Math.random() * 10000,
extra: Math.random() * 10000,
});
}
// show the data in a grid
var theGrid = new FlexGrid('#theGrid', {
alternatingRowStep: 0,
showMarquee: true,
showSelectedHeaders: 'All',
anchorCursor: true,
selectionMode: SelectionMode.MultiRange,
itemsSource: data,
// update aggregate display when selection changes
selectionChanged: (s, e) => {
// calculate aggregates
let agg = { cnt: 0, cntAll: 0, sum: 0, avg: 0, cells: {} };
s.selectedRanges.forEach(rng => {
aggregateRange(s, agg, rng);
});
// update the display using template literals
let msg = (agg.cnt > 1) ? glbz `Count: ${agg.cntAll}:n0\tAverage: ${agg.avg}:g4\tSum: ${agg.sum}:g4`
: (agg.cntAll > 1) ? glbz `Count: ${agg.cntAll}:n0`
: 'Ready';
// update the display using wijmo.format
//let msg = (agg.cnt > 1) ? format('Count: {cntAll:n0}\tAverage: {avg:g4}\tSum: {sum:g4}', agg)
// : (agg.cntAll > 1) ? format('Count: {cntAll:n0}', agg)
// : 'Ready';
document.getElementById('mr-aggregates').innerHTML = msg;
}
});
// update aggregates for a range
function aggregateRange(grid, agg, rng) {
for (let r = rng.topRow; r <= rng.bottomRow; r++) {
for (let c = rng.leftCol; c <= rng.rightCol; c++) {
let key = r + ',' + c;
if (!agg.cells[key]) { // account for overlapping ranges
agg.cells[key] = true;
let data = grid.getCellData(r, c, false);
if (isNumber(data)) { // handle numbers
agg.cnt++;
agg.sum += data;
}
if (data != '' && data != null) { // handle non-empty cells
agg.cntAll++;
}
}
}
}
agg.avg = agg.cnt > 0 ? agg.sum / agg.cnt : 0;
}
// export grid or selection to CSV
document.getElementById('btn-csv-grid').addEventListener('click', () => {
var selMode = theGrid.selectionMode;
if(selMode == SelectionMode.MultiRange){
var grid = theGrid;
grid.selectedRanges.forEach(sr => {
sr.setRange(-1, -1, -1, -1);
});
grid.select(-1, -1);
grid.refresh();
}else{
theGrid.select(-1,-1);
// 另一种方法：
//theGrid.collectionView.currentItem=null;
}
});
document.getElementById('btn-csv-sel').addEventListener('click', () => {
var csv = theGrid.getClipString(null, true, true);
saveFile(csv, 'FlexGridSelection.csv');
});
}

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] Grid 取消选中在 MultiRange 模式下的一些问题

最佳答案

1 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章