toast UI Grid 자료를 서버에 저장하는 방법(save grid 함수제작)

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);				 
}

 

이렇게 처리하면, 그래도 잘 작동하는 것 같다.

좀더 구조적인 방법이 있는지 연구중이다.

이상 끝.