首页 › 求助中心 › MultiRow的复数行选择

dllyzs 发表于 2020-12-21 14:24:49

MultiRow的复数行选择

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

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

KevinChen 发表于 2020-12-21 14:24:50

您好，可以参考以下代码：
// 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,
      product: _products.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 发表于 2020-12-23 12:08:50

谢谢~。

KevinChen 发表于 2020-12-23 12:25:12

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

查看完整版本: MultiRow的复数行选择