IT tech Coding/javascript
toast UI Grid 자료를 서버에 저장하는 방법(save grid 함수제작)
Coding Life
2021. 12. 23. 02:30
반응형
toast UI Grid는 무료인데, 기능도 많고 참 좋은 것 같다. Jexcel 사용하다가, 가끔 서비스를 block하는 경우가 있어서 전부 toast UI Grid로 변경해서 사용하고 있다.
그리드의 내용을 html input hidden 형태로 해서 form를 넘기는 방식으로 구현해 봤는데, 잘 되는 것 같다.
이때 가장 고민이 되었던 것이, 배열형태로 전달하는 콤마문제였다.
그래서 콤마를 함수를 통해 파이프(|) 문자로 바꾸고 다시 디코드하는 방식으로 처리했다.
인코딩 -> 디코딩... 이런식이 아무래도 계속 사용해야 하는 부분인가보다.
본문의 php의 input hidden 형태이다.
<!-- 배열을 전달하기 위한 Grid 값 -->
<input id="description" name="description[]" type=hidden >
<input id="material" name="material[]" type=hidden >
<input id="length" name="length[]" type=hidden >
<input id="width" name="width[]" type=hidden >
<input id="thickness" name="thickness[]" type=hidden >
<input id="weights" name="weights[]" type=hidden >
<input id="donenum" name="donenum[]" type=hidden >
<input id="donetime" name="donetime[]" type=hidden >
<input id="laserfee" name="laserfee[]" type=hidden >
<input id="unitfee" name="unitfee[]" type=hidden >
<input id="bendingNum" name="bendingNum[]" type=hidden >
<input id="bendingFee" name="bendingFee[]" type=hidden >
<input id="bendingAmount" name="bendingAmount[]" type=hidden >
<input id="paintingArea" name="paintingArea[]" type=hidden >
<input id="paintingChoice" name="paintingChoice[]" type=hidden >
<input id="paintingUnit" name="paintingUnit[]" type=hidden >
<input id="paintingAmount" name="paintingAmount[]" type=hidden >
<input id="lastwork" name="lastwork[]" type=hidden >
<input id="unit_Amount" name="unit_Amount[]" type=hidden >
<input id="est_Amount" name="est_Amount[]" type=hidden >
<input id="device" name="device[]" type=hidden >
<input id="outfitgrid" name="outfitgrid[]" type=hidden >
<input id="item_code_grid" name="item_code_grid[]" type=hidden >
<input id="item_name_grid" name="item_name_grid[]" type=hidden >
<input id="item_desc_grid" name="item_desc_grid[]" type=hidden >
<input id="vat_grid" name="vat_grid[]" type=hidden >
<input id="deadline_grid" name="deadline_grid[]" type=hidden >
<input id="memo_grid" name="memo_grid[]" type=hidden >
<input id="laser3030_StartDate" name="laser3030_StartDate" type=hidden value=<?=$laser3030_StartDate?> >
<input id="laser1030_StartDate" name="laser1030_StartDate" type=hidden value=<?=$laser1030_StartDate?> >
<input id="bending_StartDate" name="bending_StartDate" type=hidden value=<?=$bending_StartDate?> >
<input id="painting_StartDate" name="painting_StartDate" type=hidden value=<?=$painting_StartDate?> >
<input id="lastwork_StartDate" name="lastwork_StartDate" type=hidden value=<?=$lastwork_StartDate?> >
<input id="laser3030_EndDate" name="laser3030_EndDate" type=hidden value=<?=$laser3030_EndDate?> >
<input id="laser1030_EndDate" name="laser1030_EndDate" type=hidden value=<?=$laser1030_EndDate?> >
<input id="bending_EndDate" name="bending_EndDate" type=hidden value=<?=$bending_EndDate?> >
<input id="painting_EndDate" name="painting_EndDate" type=hidden value=<?=$painting_EndDate?> >
<input id="lastwork_EndDate" name="lastwork_EndDate" type=hidden value=<?=$lastwork_EndDate?> >
<input id="laser3030_StartTime" name="laser3030_StartTime" type=hidden value=<?=$laser3030_StartTime?> >
<input id="laser1030_StartTime" name="laser1030_StartTime" type=hidden value=<?=$laser1030_StartTime?> >
<input id="bending_StartTime" name="bending_StartTime" type=hidden value=<?=$bending_StartTime?> >
<input id="painting_StartTime" name="painting_StartTime" type=hidden value=<?=$painting_StartTime?> >
<input id="lastwork_StartTime" name="lastwork_StartTime" type=hidden value=<?=$lastwork_StartTime?> >
<input id="laser3030_EndTime" name="laser3030_EndTime" type=hidden value=<?=$laser3030_EndTime?> >
<input id="laser1030_EndTime" name="laser1030_EndTime" type=hidden value=<?=$laser1030_EndTime?> >
<input id="bending_EndTime" name="bending_EndTime" type=hidden value=<?=$bending_EndTime?> >
<input id="painting_EndTime" name="painting_EndTime" type=hidden value=<?=$painting_EndTime?> >
<input id="lastwork_EndTime" name="lastwork_EndTime" type=hidden value=<?=$lastwork_EndTime?> >
<input type="hidden" id="laser1030" name="laser1030" value=<?=$laser1030?> >
<input type="hidden" id="laser3030" name="laser3030" value=<?=$laser3030?> >
<input type="hidden" id="state" name="state" value=<?=$state?> >
여기에 자바스크립트로 grid 내용을 전달하는 함수는 아래와 같이 작성해 봤다.
// grid 변경된 내용을 php 넘기기 위해 input hidden에 넣는다.
function savegrid() {
let description = new Array();
let material = new Array();
let length = new Array();
let width = new Array();
let thickness = new Array();
let weights = new Array();
let donenum = new Array();
let donetime = new Array();
let laserfee = new Array();
let unitfee = new Array();
let bendingNum = new Array();
let bendingFee = new Array();
let bendingAmount = new Array();
let paintingArea = new Array();
let paintingChoice = new Array();
let paintingUnit = new Array();
let paintingAmount = new Array();
let lastwork = new Array();
let unit_Amount = new Array();
let est_Amount = new Array();
let device = new Array();
// console.log(grid.getRowCount()); //삭제시 숫자가 정상적으로 줄어든다.
const MAXcount=grid.getRowCount() + 30; // 50개 데이터를 rowkey 영향으로 더 검색한다.
let pushcount=0;
for(i=0;i<MAXcount;i++) { // grid.value는 중간중간 데이터가 빠진다. rowkey가 삭제/ 추가된 것을 반영못함.
if( grid.getValue(i, 'description')!= null ) {
description.push(replacecomma(grid.getValue(i, 'description')));
material.push(replacecomma(grid.getValue(i, 'material')));
length.push(replacecomma(grid.getValue(i, 'length')));
width.push(replacecomma(grid.getValue(i, 'width')));
thickness.push(replacecomma(grid.getValue(i, 'thickness')));
weights.push(replacecomma(grid.getValue(i, 'weights')));
donenum.push(replacecomma(grid.getValue(i, 'donenum')));
donetime.push(replacecomma(grid.getValue(i, 'donetime')));
laserfee.push(replacecomma(grid.getValue(i, 'laserfee')));
unitfee.push(replacecomma(grid.getValue(i, 'unitfee')));
bendingNum.push(replacecomma(grid.getValue(i, 'bendingNum')));
bendingAmount.push(replacecomma(grid.getValue(i, 'bendingAmount')));
bendingFee.push(replacecomma(grid.getValue(i, 'bendingFee')));
paintingArea.push(replacecomma(grid.getValue(i, 'paintingArea')));
paintingChoice.push(replacecomma(grid.getValue(i, 'paintingChoice')));
paintingUnit.push(replacecomma(grid.getValue(i, 'paintingUnit')));
paintingAmount.push(replacecomma(grid.getValue(i, 'paintingAmount')));
lastwork.push(replacecomma(grid.getValue(i, 'lastwork')));
unit_Amount.push(replacecomma(grid.getValue(i, 'unit_Amount')));
est_Amount.push(replacecomma(grid.getValue(i, 'est_Amount')));
device.push(replacecomma(grid.getValue(i, 'device')));
} // end of else
}
$('#description').val(description);
$('#material').val(material);
$('#length').val(length);
$('#width').val(width);
$('#thickness').val(thickness);
$('#weights').val(weights);
$('#donenum').val(donenum);
$('#donetime').val(donetime);
$('#laserfee').val(laserfee);
$('#unitfee').val(unitfee);
$('#bendingNum').val(bendingNum);
$('#bendingFee').val(bendingFee);
$('#bendingAmount').val(bendingAmount);
$('#paintingArea').val(paintingArea);
$('#paintingChoice').val(paintingChoice);
$('#paintingUnit').val(paintingUnit);
$('#paintingAmount').val(paintingAmount);
$('#lastwork').val(lastwork);
$('#unit_Amount').val(unit_Amount);
$('#est_Amount').val(est_Amount);
$('#device').val(device);
}
이렇게 처리하면, 그래도 잘 작동하는 것 같다.
좀더 구조적인 방법이 있는지 연구중이다.
이상 끝.
반응형