[WebSquare] 웹스퀘어 5 dataList 및 gridview API

** dataList 및 gridview API **

- data의 CRUD와 관련한 API는 gridView에서 사용하는 것이 아니라 dataList의 API 이용해야 함

 

1. insert
- insert 관련 API
  insertRow(idx) - 신규 row 생성
  insertJSON - 신규 row 생성하면서 json 형태의 초기 data를 함께 적용
  insertXML - 신규 row 생성하면서 xml 형태의 초기 data를 함께 적용  
  insertData - 신규 row 생성하면서 1차원 Array 형태의 초기 data를 함께 적용
- insertRow 후 바인딩된 dataList를 확인하면 신규 Row에 대한 rowStatus는 C 로 된다
- 그리드의 현재 포커스된 row에서 새 row 생성되게 할려면

scwin.btnInsert_onclick = function(e) {
    var focusIdx = ui_memberList.getFocusedRowIndex();
    dc_userInfoList.insertRow(focusIdx);
};

2. update
- row 수정 후 dataList를 확인하면 해당 Row에 대한 rowStatus는 U 로 된다

3. read
- 그냥 조회한 row는 rowStatus는 R 로 된다
 
4. delete
- delete를 적용하면 실제 data를 dataList에서 지우는게 아니라 gridView에서랑 해당 data 확인은 가능하되 앞에 상태값이 변경된다
- dataList의 rowStatus는 D 로 된다
1) 현재 포커스된 row delete

scwin.btnDelete_onclick = function(e) {
    var focusIdx = ui_memberList.getFocusedRowIndex();
    dc_userInfoList.deleteRow(focusIdx);
};

2) 다중삭제(deleteRows)
   7. checkbox 만들기 관련하여 체크박스 만들고
   check된 row의 index 모두 구하기
   gridView의 API 중 getCheckedIndex API 이용
   getCheckedIndex - check 된 row의 index를 배열로 반환
   getCheckedData - check 된 row의 data를 1차원 배열로 반환
   getCheckedJSON - check 된 row의 data를 json 형태로 반환
   getCheckedXML - check 된 row의 data를 xml 형태로 반환
   var chkArr = ui_memberList.getCheckedIndex(colIndex[해당 checkbox가 갖는 id 또는 index의미])  

scwin.btnDeleteRows_onclick = function(e) {
	var chkArr = ui_memberList.getCheckedIndex("CHK");
	dc_userInfoList.deleteRows(chkArr);
};

5. remove
- removeRow를 이용하면 실제 data를 dataList에서 삭제 처리한다. 화면에서 보이는 gridView에서랑 해당 dataList 없어짐
- 그러나 서버로 전송하면 해당 dataList에서 전송된다
- dataList의 rowStatus는 E 로 된다
1) 현재 포커스된 row remove

scwin.btnRemove_onclick = function(e) {
	var focusIdx = ui_memberList.getFocusedRowIndex();
	var obj = dc_userInfoList.removeRow(focusIdx);
};

2) 만약 removeRow를 통해 실제 삭제된 data를 다시 활용하려면, 
   remove 처리를 해주는 API들은 삭제된 data 자체를 반환해주는 기능을 이용하여
   removeRow하는 삭제된 data를 특정변수에 담아 두고 다시 활용 가능하다

3) 다중삭제(removeRows)
   7. checkbox 만들기 관련하여 체크박스 만들고
   check된 row의 index 모두 구하기
   gridView의 API 중 getCheckedIndex API 이용
   getCheckedIndex - check 된 row의 index를 배열로 반환
   getCheckedData - check 된 row의 data를 1차원 배열로 반환
   getCheckedJSON - check 된 row의 data를 json 형태로 반환
   getCheckedXML - check 된 row의 data를 xml 형태로 반환
   var chkArr = ui_memberList.getCheckedIndex(colIndex[해당 checkbox가 갖는 id 또는 index의미])  

scwin.btnRemoveRows_onclick = function(e) {
	var chkArr = ui_memberList.getCheckedIndex("CHK");
	dc_userInfoList.removeRows(chkArr);
};

 

   
6. 입력, 수정, 삭제에 대한 submission
- 입력, 수정, 삭제에 대한 처리만 원한다면 화면에서 필요한 data만 서버로 전송하자
- submission의 Reference에 dataList 선택하면서 action에 옵션을 주자
  all - 모든데이터 전송
  modified - 입력, 수정, 삭제 데이터만 전송
  inserted - 입력 데이터만 전송
  updated -  수정 데이터만 전송
  deleted - 삭제 데이터만 전송
  
7. checkbox 만들기
- 해당 dataList에 checkbox에 대한 컬럼이 있어 맵핑이 gridView에서 되어야 checkbox 컬럼이 활성화 된다
  dataList에 CHK 컬럼 만든다.
- gridView 컬럼만들고 header, body의 속성 inputType:checkbox, datatype:number 선택
  id에 만든 컬럼인 CHK 선택
- check 항목의 값이 check 되면 1, 해제되면 0으로 변경됨
  (이는 gridView의 기본기능으로 default로 사용하는 1,0을 대신해 다른 값을 설정할 수 있지만, 값자체를 없앨수는 없다)
- 값 변경시에 해당 컬럼의 Property 중 아래 속성을 변경
  valueType:other
  trueValue: 1대신 다른 값으로
  falseValue: 0대신 다른 값으로
- 만약 check 되더라도 상태값에 영향을 주지 않으려면 dataList의 해당 컬럼의 ignoreStatus 속성 이용
  ignoreStatus:true
  
8. 초기화
1) 초기화를 적용하려면, dataList의 API인 한꺼번에 모든값을 삭제하는 removeAll 사용
- removeAll은 모든값을 삭제하면서 삭제된 data에 대한처리는 1차원 배열로 반환해 주는 기능 한다
- removeAll을 이용하여 모든 data를 한번에 삭제하면서, 삭제된 data를 반환해 주도록 스크립트 작성할 수 있으며
  특정변수에 담아 두어 처리하면 삭제된 data도 다시 사용가능

scwin.btnInit_onclick = function(e) {
  var obj = dc_userInfoList.removeAll();
};

2) 만약 삭제 data를 반환할 필요가 없다면, setData를 통해서 초기화 가능 구현 가능
- setData에 빈 배열을 넣어주면 모든 data가 초기화 될 수 있다
- setData를 통해 빈 배열 초기화하면 삭제된 data를 갖고 있지 않아서 메모리를 훨씬 더 적게 사용하는 장점

scwin.btnInit_onclick = function(e) {
  dc_userInfoList.setData([]);
};

9. gridView의 footer 기능(컬럼에 대한 합계 표시등)
- 컬럼 합계할 컬럼의 body와 footer 모두 dataType을 숫자형태로 적용한다
  dataType:number
  displayFormat:#,###
  textAlign:right
- Footer의 Property에서 속성 변경 (계산식 이용한다)
  제공되는 계산식은 SUM, AVG, MAX, MIN,COUNT  
  inputType:exprssion
  exprssion:SUM('ROLE_CD'[body컬럼의 id])
  
10. gridView의 excel 
1) excel download
- gridView의 API advancedExcelDownload(options, infoArr);
- advancedExcelDownload([]);
- 첫번째 파라미터 - json 형태로 저장된 gridView의 excel download 옵션
- 두번째 파라미터 - gridView에 대한 내용 이외에 추가로 다른 셀에 표현할 내용에 대한 처리
- 그리드에서는 안쓰지만 엑셀 다운로드에 필요한 항목은 gridView 컬럼을 hidden해 놓는다

//엑셀 다운로드
scwin.btnExcelDown_onclick = function(e) {
	var excelOpt = {};
	excelOpt.fileName = "excelData.xls"; //또는 xlsx 확장자 사용
	excelOpt.sheetName = "test003";
	excelOpt.removeColumns = scwin.fnGetHiddenColumnIndex(ui_memberList);
	ui_memberList.advancedExcelDownload(excelOpt);
};
//엑셀다운로드시 hidden 컬럼 정보or 빼고 엑셀다운할 컬럼(chk 컬럼같은거)의 colIndex를를 removeColumns에 전달달
scwin.fnGetHiddenColumnIndex = function(grdObj){
	//debugger;
	var strRemoveIndex = "";
	for(var i=0;i<grdObj.getColCnt();i++){
		var strHidden = grdObj.getCellOption(0,i,"hidden");
		var strId = grdObj.getCellOption(0,i,"id");
		if(strHidden == "true" || strId == "CHK"){
			if(strRemoveIndex.length==0){
				strRemoveIndex = i;
			}else{
				strRemoveIndex = strRemoveIndex+","+i;
			}
		}
	}
	return strRemoveIndex.toString();
};

2) excel upload
- gridViewd의 API advancedExcelUpload(options);
- advancedExcelUpload({"headerExist":"1"});
  "headerExist":"1" 엑셀헤더의 위치 지정으로 헤더는 업로드 되지 않게 한다 

scwin.btnExcelUp_onclick = function(e) {
	var excelOpt;
	excelOpt = {
		headerExist : "1", //[default: 0] Excel 파일에서 그리드의 데이터에 header가 있는지 여부(1이면 header 존재 0이면 없음)
		trim : 1, //[default: 0, 1] 엑셀 각각의 셀데이터 좌, 우에 공백이 있는 경우 제거할지 여부 (1이면 제거, 0이면 유지)
	};
	ui_memberList.advancedExcelUpload(excelOpt);
};