ReactJS 그리드 내에서 버튼으로 수량 변경
추천0 비추천 0
페이지 정보
작성자 MESCIUSMAN
작성일 2023-07-06 09:48 조회 931회
댓글 2건
제품 버전 : "@grapecity/wijmo.react.all": "^5.20221.857",
컨트롤 이름 : grid
본문
관련링크
아래와 같이 비슷하게 해주시면 css는 제가 변경해보겠습니다!
안녕하세요
위 그림 처럼 그리드 내에서 버튼을 누르면 수량이 오르고 내리는 기능을 추가하고 싶습니다.
아래처럼 소스에 select가 아닌
한 셀 안에서 input으로 직접 수량을 적을 수 있고 화살표를 눌렀을 때 적은 수량에서 + - 를 하고 싶은데 쉽지가 않아 문의드립니다.
+ - 버튼은 양옆 input 가운데로 보였으면 좋겠네요
부탁드리겠습니다.
const initializeGrid = (flex) => {
setGridData(flex);
flex.select(-1, -1);
flex.formatItem.addHandler((s, e) => {
if (e.panel == s.cells) {
let col = s.columns[e.col],
item = s.rows[e.row].dataItem;
if (item == _currentEditItem) {
} else {
// create buttons for items not being edited
// eslint-disable-next-line default-case
switch (col.binding) {
case 'selects':
e.cell.innerHTML = document.getElementById('addtoselect').innerHTML;
e.cell['dataItem'] = item;
break;
case 'buttons':
e.cell.innerHTML = document.getElementById('addtocart').innerHTML;
e.cell['dataItem'] = item;
break;
}
}
}
});
// handle button clicks
flex.addEventListener(flex.hostElement, 'click', (e) => {
let targetButton = wjCore.closest(e.target, 'button');
let targetSelect = wjCore.closest(e.target, 'select');
let ht = flex.hitTest(e);
if (ht.panel) {
if (ht.panel.cellType === 1) {
let rowData = flex.rows[ht.row].dataItem;
if (targetButton instanceof HTMLButtonElement) {
// eslint-disable-next-line default-case
switch (targetButton.id) {
case 'addbtn':
setAddToCart(rowData);
break;
}
}
if (targetSelect instanceof HTMLSelectElement) {
// eslint-disable-next-line default-case
switch (targetSelect.id) {
case 'qtyselect':
// onSelectQty(e);
break;
}
}
}
}
});
};
댓글목록
GCK루시님의 댓글
GCK루시
작성일
MESCIUSMAN님의 댓글
MESCIUSMAN
작성일
7 답변
