[WebSquare] 웹스퀘어 5 gridview

gridview

1. autofit:allColumn, autofitminwith:700 :css 미디어 쿼리 효과 내기
- autofit 컬럼 줄어듬
- autofitminwith:700 이면 700이하로는 안줄어듬

2. columnmove : true : 그리드 내에서 컬럼 움직임

3. sortable
- sortable:true  그리드 헤드에서 데이터 솔트 가능하게 함
- 전체와 그리드 항목별로 설정 가능
  gridView에서 sortable:true, 원하지 않는 항목만 column 헤더 속성에서 sortable:false)
- ctrl키 + 헤더 더블클릭 시 multi sort 가 적용된다
- sortEvent는 default로 더블클릭에서 수행, 변경하고자 한다면 속성에서 변경가능

4. 컬럼에 필터 기능으로 검색 가능하게 하기
- useFilter:true 그리드 헤더에 설정 (팝업창 떠서 검색조건 입력)
- useFilterList:true gridView에 설정 (해당 컬럼에서 List 형태로 보여지면서 직접 선택 가능)

5. editModeEvent 로 컬럼 edit를 더블클릭,클릭시 활성화 결정
- gridView에서 설정
- editModeEvent:ondbclick(default) 컬럼 더블클릭시 editMode 활성화
- editModeEvent:onclick            컬럼 클릭시 editMode 활성화

6. keyMoveEditMode:true

- tab키를 통해 포커스 이동해도 바로 편집모드로 적용됨

7. focusFlow:linear      

- tab키를 통해 포커스 이동하다가 마지막 컬럼에서는 자동으로 다음 row로 이동

8. focusMode  

- default는 cell 인데 row로 선택시 row별로 포커스 잡힌다

9. selectedRowColor 선택된 row의 색상지정
- 로드시 첫row에 포커스 주기
submission-done 스크립트 부분에서 gridView의 포커스를 적용하는 API 적용
ui_memberList.setFocusedCell(rowIndex, colIndex, editMode(편집모드,기본은 false));

scwin.sbm_search_submitdone = function(e) {
    if(e.responseJSON.msgCode == "S"){
    	ui_memberList.setFocusedCell(0, 0);
    }
};

10. readonly
- 각각 컬럼별 설정과 gridView 전체 설정 가능하며 아마도 각각 컬럼별로 주로 쓰지 않을까..

11. gridView에서 combo 적용은 body컬럼 선택후 속성에서 inputType
- inputType:select 콤보지원
- inputType:calendar 날짜지원
- dataCollection 바인딩시에는 컬럼 더블클릭하면 해당 팝업 뜬다
- viewType:icon  viewType을 icon으로 적용할 컬럼은 알맞는 type을 오른쪽에 표시해준다

12. gridView 속성을 통해 순번 지정하기
- gridView 선택 -> rowNumVisible:true 
- rowNumHeaderValue에 '순번' 이렇게 적으면 생성된 순번 컬럼 헤더에 문구 입력된다
- rowNumWidth 로 순번컬럼에 width
 
13. gridView의 각 row의 상태값 표시하기
- rowStatusVisible:true  row 편집시 앞에 아이콘 나타남
- rowStatusHeaderValue 해당 컬럼에 컬럼명

14. gridView의 가상스크롤인 세로스크롤로 화면 어긋하는것 개선(한번에 표현해줄수 있는 row수 지정)
- visibleRowNum:10 을 주면 body row수가 10줄에 맞춰서 표현되어 세로 스크롤이 어긋나지 않음
- visibleRowNum:all 세로스크롤 없이 모든 data표현하기에 때문에 data가 많은 경우 매우 느려질수 있다(권장 안함)

15. gridView 컬럼 생성시
-신규생성 : dataList 기준으로 모든 column 새로 생성
-헤더만 업데이트 : gridView에 그려진 column 중 헤더 부분만 적용할 dataList의 name와 mapping
-바디만 업데이트 : gridView에 그려진 column 중 바디 부분만 적용할 dataList의 id와 mapping
-모두 업데이트  : gridView에 그려진 column의 바디 및 헤더를 dataList의 id 및 name에 각각 mapping