ReactJS Selector MergeManager동시 사용시 merge 범위 수정
추천0 비추천 0
페이지 정보
작성자 뀨르르
작성일 2021-10-17 17:52 조회 4,014회
댓글 0건
제품 버전 : 5.20202.699
컨트롤 이름 : FlexGrid
본문
관련링크
import "@grapecity/wijmo.styles/wijmo.css";
import "bootstrap.css";
import "./app.css";
//
import * as React from "react";
import * as ReactDOM from "react-dom";
//
import * as wjCore from "@grapecity/wijmo";
import { FlexGrid, FlexGridColumn } from "@grapecity/wijmo.react.grid";
import * as wjGrid from "@grapecity/wijmo.grid";
import { Selector } from "@grapecity/wijmo.grid.selector";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
selectedItems: [],
};
this.selector = null;
}
initGrid(grid) {
this.selector = new Selector(grid, {
itemChecked: (s, e) => {
this.setState({
selectedItems: grid.rows.filter((r) => r.isSelected),
});
},
});
}
render() {
return (
<div className="container-fluid">
<FlexGrid
initialized={(s) => this.initGrid(s)}
itemsSource={this.state.data}
columnGroups={this.state.columnConfigs}
autoGenerateColumns={false}
alternatingRowStep={0}
mergeManager={new RestrictedMergeManager()}
></FlexGrid>
</div>
);
}
initGrid(grid) {
this.selector = new Selector(grid, {
itemChecked: (s, e) => {
this.setState({
selectedItems: grid.rows.filter((r) => r.isSelected),
});
},
});
}
componentDidMount() {
this.setState({
data: new wjCore.CollectionView(this.getData()),
columnConfigs: this.getColumnConfig(),
});
}
getColumnConfig() {
let columnConfig = [
{
header: "type",
binding: "type",
allowResizing: true,
width: 50,
align: "center",
},
{
header: "no",
binding: "positionNo",
allowResizing: true,
align: "center",
width: 50,
},
{
header: "positionName",
binding: "positionName",
allowResizing: true,
width: 80,
align: "center",
},
{
header: "a",
binding: "a",
allowResizing: true,
width: 100,
align: "center",
},
{
header: "b",
binding: "b",
allowResizing: true,
width: 100,
align: "center",
},
{
header: "c",
binding: "c",
allowResizing: true,
width: 100,
align: "center",
},
{
header: "lastUpdateUserId",
binding: "lastUpdateUserId",
allowResizing: true,
width: 150,
isReadOnly: true,
cssClass: "cell-readonly overflow_new_line",
align: "center",
},
{
header: "lastUpdateDate",
binding: "lastUpdateDate",
allowResizing: true,
width: 150,
isReadOnly: true,
cssClass: "cell-readonly overflow_new_line",
align: "center",
},
];
return columnConfig;
}
getData() {
let data = [];
data = [
{
positionName: "A1",
c: "CPOS_T",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
a: "AC_A1",
positionNo: 1,
b: "CPOS_B",
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "A2",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
a: "AC_A2",
positionNo: 2,
b: "CPOS_A2",
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "1",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
positionNo: 3,
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "2",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
positionNo: 4,
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "3",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
positionNo: 5,
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "4",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
positionNo: 6,
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "SH",
c: "SH",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
a: "AC_SH",
positionNo: 7,
b: "CPOS_SH",
type: 1,
lastUpdateUserName: "SPC Plus Admin",
},
{
positionName: "A1",
lastUpdateUserId: "user",
lastUpdateDate: "2021-08-25T12:01:00.000+09:00",
positionNo: 1,
type: 2,
lastUpdateUserName: "SPC Plus Admin",
},
];
return data;
}
}
class RestrictedMergeManager extends wjGrid.MergeManager {
getMergedRange(p, r, c, clip = true) {
//
// create basic cell range
var rng = null;
//
// start with single cell
rng = new wjGrid.CellRange(r, c);
var pcol = 0;
if (c !== 0 && c !== 6 && c !== 7) {
return;
}
//
// get reference values to use for merging
var val = p.getCellData(r, c, false);
var pval = p.getCellData(r, pcol, false);
//
// expand up
while (
rng.row > 0 &&
p.getCellData(rng.row - 1, c, false) == val &&
p.getCellData(rng.row - 1, pcol, false) == pval
) {
rng.row--;
}
//
// expand down
while (
rng.row2 < p.rows.length - 1 &&
p.getCellData(rng.row2 + 1, c, false) == val &&
p.getCellData(rng.row2 + 1, pcol, false) == pval
) {
rng.row2++;
}
//
// don't bother with single-cell ranges
if (rng.isSingleCell) {
rng = null;
}
//
// done
return rng;
}
}
ReactDOM.render(<App />, document.getElementById("app"));
안녕하세요.
selector와 mergemanager를 동시에 사용하려고 하는데
type열을 기준으로 merge를 하고 a,b,c열은 merge하지 않으려고 합니다.
그러나 merge 사용시 selector도 같이 merge가 되는데 이것을 control할 수 있는지 궁금합니다.
원하는 결과는 다음과 같습니다.
위 스크린샷 처럼 selector를 merge를 안하거나
type기준으로 merge를 할 수 있는 방법이 궁금합니다.
감사합니다.
댓글목록
등록된 댓글이 없습니다.
1 답변
