MultiRow的复数行选择

登录

MultiRow设置selectionMode: wijmo.grid.SelectionMode.Row时，点击行后只有一行数据高亮？

能够高亮显示同一条记录的多行么？
效果如下图所示

KevinChen · KevinChen

您好，可以参考以下代码：

// Import stylesheets
import "./style.css";
import "@grapecity/wijmo.styles/wijmo.css";
import * as wjcCore from "@grapecity/wijmo";
import * as wjcInput from "@grapecity/wijmo.input";
import * as wjcGrid from "@grapecity/wijmo.grid";
import * as wjcGridFilter from "@grapecity/wijmo.grid.filter";
import * as wjcMultirow from "@grapecity/wijmo.grid.multirow";
var countries = "US,Germany,UK,Japan,Italy,Greece".split(",");
const multirow = new wjcMultirow.MultiRow("#grid", {
itemsSource: getData(),
layoutDefinition: getLayoutDef()
});
multirow.select(-1, -1);
multirow.selectionChanged.addHandler((s, e) => {
var rowsPerItem = s.rowsPerItem;
var rowIdx = e.row;
var mainRow = getFirstRow(rowIdx, rowsPerItem);
var cols = s.columns.length;
var rng = new wjcGrid.CellRange(mainRow, 0, mainRow + rowsPerItem - 1, cols);
if (rng.equals(s.selection)) {
return;
}
s.select(rng);
});
function getFirstRow(row, rowsPerItem) {
return row - (row % rowsPerItem);
}
// create some random data
function getData() {
let data = [];
let _countries = "US,Germany,UK,Japan,Italy,Greece".split(",");
let _products = [
{ id: 0, name: "Widget", unitPrice: 23.43 },
{ id: 1, name: "Gadget", unitPrice: 12.33 },
{ id: 2, name: "Doohickey", unitPrice: 53.07 }
];
let dt = new Date();
for (let i = 0; i < 5; i++) {
let cond1 = i % 3 === 0,
cond2 = i % 4 === 0;
data.push({
id: i,
date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
country: _countries[Math.floor(Math.random() * _countries.length)],
product: _products[Math.floor(Math.random() * _products.length)].name,
amount: Math.random() * 10000 - 5000,
discount: Math.random(),
sales: Math.random() * 2000
});
}
return data;
}
function getLayoutDef() {
return [
{ cells: [{ binding: "id", header: "ID", width: 200 }] },
{
cells: [
{
binding: "date",
header: "Date",
format: "d",
width: 200,
aggregate: wjcCore.Aggregate.Max
},
{ binding: "time", header: "Time", format: "t" }
]
},
{
cells: [
{
binding: "country",
header: "Country",
width: 200,
multiLine: true,
wordWrap: true
},
{
binding: "product",
header: "Product",
width: 200,
multiLine: true,
wordWrap: true
}
]
},
{
cells: [
{
binding: "amount",
header: "Amount",
width: 200,
aggregate: wjcCore.Aggregate.Std
},
{
binding: "discount",
header: "Discount",
width: 200,
format: "p2",
aggregate: wjcCore.Aggregate.Avg
}
]
}
];
}

复制代码

完整示例请参考：
https://stackblitz.com/edit/js-brfwzu

dllyzs · dllyzs

谢谢~。

KevinChen · KevinChen

感谢反馈，本贴结帖了，有新的问题欢迎发新帖交流~

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

[已处理] MultiRow的复数行选择

最佳答案

3 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章