DataCollection
개요
- 정의
브라우저의 메모리에 할당되는 JavaScript 데이터 객체.
DataCollection은 다양한 종류의 방대한 데이터를 웹 브라우저에서 쉽게 제어하기 위해 WebSquare5가 사용하는 데이터 모델.
- 종류
DataMap: 단건 데이터 객체
DataList: 다건 데이터 객체
LinkedDataList: DataList 객체에 Filter/Sort를 적용한 결과
모델 | 설명 |
|---|---|
dataMap | key/value 형태의 단일 데이터로 구성된 객체 |
dataList | 리스트 형태의 다건의 데이터로 구성된 객체 |
linkedDataList | dataList를 필터링/정렬한 후, 그 결과만 제공 |
- 기능
서버에 전달할 데이터 규격을 정의 (Reference)
서버로 부터 받을 데이터 규격을 정의 (Target)
브라우저와 서버 간의 통신은 DataCollection 데이터 모델과 Submission을 통해 설정합니다.
- 주요 용도
화면에서 사용하고자 하는 임시 데이터
UI컴포넌트와 연동
서버로 부터 받은 단일형(DataMap) 혹은 목록형(DataList) 데이터를 브라우저에 출력
웹 브라우저로부터 원격의 서버에 존재하는 데이터를 (추가, 삭제, 편집 등) 관리할 수 있는 인터페이스 제공
- 특징
DataCollection은 XML 구조와 XPath에 대한 이해 없이도 데이터 구조를 이해할 수 있는 직관적인 인터페이스를 제공.
DataCollection 뷰에서 설정한 DataCollection의 코드는 Source 탭에 자동 생성됨.
각 데이터 객체의 id는 필수값.
JSON, XML, JSON Array포맷으로 설정(set)하거나 또는 반환(get) 받을 수 있다.(LinkedDataList는 반환만 가능.)
초기값을 정의할 수 있다. (LinkedDataList 제외)
동적(Script)으로 생성 가능.
데이터의 상태(추가/수정/삭제)값을 관리.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/dataList_dataMap_linkedDataList.xml)
YouTube 동영상 (https://youtu.be/bGIxYMKQlCA)
동적 생성
$p.data() – DataCollection 동적 생성 참고.
현재 화면에 포함된 DataCollection 반환
$p.data() – 화면에 포함된 DataCollection 반환 참고.
복사 및 삭제
특정 Page의 DataCollection을 복사해서 다른 Page에서 사용하는 것이 가능합니다.
Outline – Head 뷰를 선택 후, 복사/삭제할 DataCollection을 클릭한 후 해당 메뉴를 선택하십시오.
Outline – Head – DataCollection 우클릭 시
YouTube 동영상 (https://youtu.be/TBJCxgTBo7c)
DataList
아래는 개발자가 DataCollection 뷰에서 DataList을 생성할 때 Source 탭에 자동 생성되는 코드입니다. 아래 예에서 "이름, 주소, 이메일" 칼럼에 대해 "홍길동, 서울시 구로구, user2@mail.com"와 "이태백, 서울 강남구, user2@mail.com" 두 건의 데이터 존재합니다.
$r_title(DataList)
<head>
<xf:model>
<w2:dataCollection baseNode="map">
<w2:dataList id="dataList1" baseNode="vector" repeatNode="map" valueAttribute="">
<w2:columnInfo>
<w2:column id="name" name="이름" dataType="text" />
<w2:column id="addr" name="주소" dataType="text" />
<w2:column id="email" name="이메일" dataType="text" />
</w2:columnInfo>
<w2:data use="true" xmlns="">
<w2:row>
<name>홍길동</name>
<addr>서울 구로구</addr>
<email>user1@mail.com</email>
</w2:row>
<w2:row>
<name>이태백</name>
<addr>서울 강남구</addr>
<email>user2@mail.com</email>
</w2:row>
</w2:data>
</w2:dataList>
</w2:dataCollection>
</xf:model>
</head>하위노드 | 설명 | ||
|---|---|---|---|
<w2:columnInfo> | 열 정보 | ||
<w2:column> | 열 정보 | ||
id | 열 ID 고유값 get/set은 사용할 수 없습니다. | ||
name | 열 이름 | ||
dataType | 데이터 타입 (number, text, date) 기본값: text | ||
<w2:data> | 실제 데이터 | ||
use | true: 입력된 데이터를 실제 초기값으로 사용. false: WebSquare5 Studio의 Design 탭에만 입력된 데이터를 표시함. | ||
| 반복 데이터를 구분하는 노드 | ||
데이터 | 각각의 열에 대한 값을 설정합니다. | ||
생성
Outline – Head 뷰를 선택합니다.
DataCollection을 우클릭한 후, DataList를 선택합니다.
DataList 추가
아래와 같은 창이 표시되면, 행 추가 버튼을 클릭하여 데이터를 입력합니다. (이미 데이터가 존재할 경우 복사하기-붙여넣기를 하십시오.)
DataList 정의
데이터 통신 없이 브라우저에 기본값을 표시할 경우 Data 탭을 선택한 후 use data를 선택하고, 컬럼 별 데이터를 입력합니다.
데이터 입력
DataList에 정의된 형태의 데이터를 출력할 GridView를 Design 탭에 그립니다.
Outline – Head – DataCollection 선택 후 바인딩할 DataList를 GridView로 드래그-앤-드롭합니다.
DataList를 GridView로 드래깅하여 바인딩하기
아래와 같은 창이 나타나면 OK를 클릭합니다.
GridView와 바인딩하기
GridView 상의 툴팁 혹은 dataList 속성 설정을 통해 바인딩 상태를 확인할 수 있습니다.
GridView 툴팁
GridView의 dataList 속성 확인
혹은 Outline – Head 뷰에서 DataList를 우클릭한 후 Search bound component를 클릭하여 해당 DataList와 바인딩된 컴포넌트를 확인할 수 있습니다.
DataList와 바인딩된 컴포넌트 확인
바인딩된 컴포넌트 검색 결과
브라우저에서 Page 화면을 실행하여 정상적으로 바인딩 되었는지 확인합니다.
실제 실행 화면
데이터 설정
setJSON()
YouTube 동영상 (https://youtu.be/0h_YVjGznJg)
setJSON() & setData() & setXML()
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/setData_setJSON_setXML_DataList.xml)
YouTube 동영상 (https://youtu.be/zLzBjz4tYac)
데이터 타입 자동 변경
DataList에 설정하려는 데이터의 타입과 DataList 컬럼의 dataType 속성 값이 일치하지 않을 경우, keepDataType 및 preserveType 속성을 사용하여 DataList 컬럼의 dataType에 따라 데이터를 설정할 수 있습니다.
string 타입 데이터를 number 타입으로 설정 (keepDataType)
string 타입의 데이터를 DataList에 설정할 경우 DataList 컬럼의 dataType이 "number"인 경우, string 타입의 데이터를 dataType="number" 타입으로 변환하여 DataList 컬럼에 설정할 수 있습니다. 이 기능을 사용하려면 DataList의 keepDataType 속성 값을 "true"로 설정하십시오.
YouTube 동영상 (https://youtu.be/FRxRJ6jawyg)
number 타입 데이터를 string 타입으로 설정 (preserveType)
number 타입의 데이터를 DataList에 설정할 경우 DataList 컬럼의 dataType이 "string"인 경우, number 타입의 데이터를 dataType="text" 타입으로 변환하여 DataList 컬럼에 설정할 수 있습니다. 이 기능을 사용하려면 DataList의 keepDataType 속성 값을 "true"로 설정하십시오.
YouTube 동영상 (https://youtu.be/fvpVt24nNhw)
필터링
getFilterList()
DataList가 필터링된 경우, DataList 각 칼럼의 필터링 상태를 반환하는 함수입니다. 사용 방법은 아래와 같습니다.
형식 | dataList1.getFilterList(); |
|---|---|
반환 값 | dataList에 적용된 필터들을 배열로 저장한 객체 |
관련 함수 | setColumnFilter |
아래는 현재 필터링 상태를 저장한 후, 필터링을 해제하고 다시 이전 필터링 상태로 돌아가는 예제입니다.
$r_title(사용 예)
<script type="text/javascript"><![CDATA[
var data = [];
for(var i = 0; i < 20*3 ; i++){
data.push(i);
}
dataList1.setData(data);
scwin.tempFilter = [];
scwin.trigger1_onclick = function(e) {
dataList1.clearFilter();
};
scwin.trigger2_onclick = function(e) {
scwin.tempFilter = dataList1.getFilterList();
};
scwin.trigger3_onclick = function(e) {
for(var i = 0; i < scwin.tempFilter.length; i++){
dataList1.setColumnFilter(scwin.tempFilter[i]);
}
};
]]></script>예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/getFiterList_clearFilter_setColumnFilter_DataList/)
YouTube 동영상 (https://youtu.be/hvxhjZoPsts)
getFilteredRowIndex()
getFilteredRowIndex( realRowIndex ) 함수를 통해 필터링 후 행의 변경된 인덱스를 확인할 수 있습니다.
YouTube 동영상 (https://youtu.be/xbtkTRYbHq4)
데이터 반환
DataList의 전체 데이터 반환
getAllJSON() 함수를 사용하여 DataList의 전체 데이터를 JSON으로 변환하여 1차원 배열로 반환할 수 있습니다.
YouTube 동영상 (https://youtu.be/X2kMVMJEarw)
DataList의 행 수 반환
getRowCount() 함수를 사용하여 현재 DataList와 바인딩된 GridView에 표시된 행 수를 반환할 수 있습니다.
YouTube 동영상 (https://youtu.be/DyKCvK4hAxc)
셀 데이터 반환
getCellData() 함수를 사용하여 특정 셀의 데이터를 반환할 수 있습니다.
YouTube 동영상 (https://youtu.be/VL71nUW6nck)
사용자 데이터 설정 및 반환
setUserData() 및 getUserData() 함수를 이용하여 DataList의 userData1, userData2, 혹은 userData3 속성 값을 설정하거나 반환할 수 있습니다. 모든 DataCollection 컴포넌트(aliasDataMap, aliasDataList, aliasLinkedDataList, dataMap, linkedDataList 포함)에 대해 동일하게 사용할 수 있습니다.
$r_title(사용 예) dataList1.setUserData( "userData1", "12345" ); dataList1.getUserData( "userData1" );
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/setUserData_getUserData_DataList.xml)
YouTube 동영상 (https://youtu.be/oEbMw_9xGaQ)
여러 DataList를 Excel 파일로 다운로드
DataList 여러 개 → Excel 다운로드 참조.
공백 데이터 처리
DataLIst가 공백 데이터를 포함한 경우, 공백 데이터를 공백("")으로 치환하여 반환하거나, 공백 데이터를 제외하고 반환하거나, 혹은, null 값으로 반환할 수 있습니다. DataList의 nullNYType 속성 값을 아래와 같이 설정하십시오.
"default"(기본 값) : 공백("")으로 치환."exclude": 공백 데이터를 제외하고 반환."null":null로 반환.
DataList 컬럼(dataList.column)의 nullNY 속성 설정
DataList의 nullNYType 속성 설정을 적용하려면, 각 DataList의 컬럼(dataList.column)의 nullYN 속성 값을 "true"로 설정하십시오. nullYN="true" 속성 설정이 적용된 DataList 컬럼(dataList.column)만 DataList의 nullNYType 속성 설정에 따라 공백 데이터가 처리됩니다.
아래 예제는 DataList에 nullYNType="true" 설정을 적용한 후, DataList의 col2, col3, col4 컬럼에 대해서만 nullYN="true" 설정을 적용한 경우 입니다. col1의 공백 데이터는 공백("")으로 반환되지만, col2, col3, col4 컬럼의 공백 데이터는 반환되지 않는 것을 확인할 수 있습니다.
nullYNType="exclude" (DataList) nullYN="true" (col2, col3 & col4 of DataList)
dataList.column
컬럼 데이터 변경
importFormatter
dataList.column의 importFormatter 속성으로 사용자 정의 함수를 지정한 후, 해당 함수를 통해 컬럼의 데이터를 변경할 수 있습니다.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/importFormatter_dataList_column.xml)
YouTube 동영상 (https://youtu.be/0rb9R-itwAQ)
여러 DataList를 Excel 파일로 다운로드
DataList 여러 개 → Excel 다운로드 참조.
이벤트
ondataload
DataList의 ondataload 이벤트는 DataList의 데이터가 새로 설정되거나 추가될 때 발생합니다.
ondataload
YouTube 동영상 (https://youtu.be/h36vNjn5Xbs)
onbeforecelldatachange
DataList의 onbeforecelldatachange 이벤트는 DataList와 바인딩된 GridView의 셀 데이터가 변경되기 직전에 발생합니다. 이벤트 함수가 false를 반환하면 GridView에서 변경한 데이터가 DataList에 적용되지 않습니다.
onbeforerowpositionchange & oncelldatachange
$r_title(사용 예) scwin.dataList1_onbeforecelldatachange = function(info) { if (info.colID == "Hobby") { if(info.newValue == "") { return false; } } };
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/onbeforecelldatachange_DataList/)
YouTube 동영상 (https://youtu.be/N6bmaCLL__I)
YouTube 동영상 (https://youtu.be/N6bmaCLL__I)
onbeforerowpositionchange & onrowpositionchange
DataList의 onbeforerowposition 이벤트는 DataList와 바인딩된 GridView의 행 위치가 변경되기 전에 발생하며, onbeforerowposition 이벤트 함수가 true를 반환하면 onrowposition 이벤트가 발생합니다.
onbeforerowpositionchange & onrowpositionchange
oninsertrow
DataList의 oninsertrow 이벤트는 아래의 함수를 사용하여 DataList와 바인딩된 GridView의 행을 추가할 때 발생합니다.
insertRow()insertData()insertJSON()insertXML()
oninsertrow
onremoverow
DataList의 onremoverow 이벤트는 아래의 함수를 사용하여 DataList와 바인딩된 GridView의 행을 제거할 때 발생합니다.
removeRow()removeRows()removeRange()removeAll()
onremoverow
DataMap
아래는 개발자가 DataCollection 뷰에서 DataMap을 생성할 때 Source 탭에 자동 생성되는 코드입니다. 아래의 예에서 key/value 형태의 데이터 "이름/홍길동, 주소/서울시 구로구, 이메일/user2@mail.com" 한 건 존재합니다.
$r_title(DataMap)
<head>
<xf:model>
<w2:dataCollection baseNode="map">
<w2:dataMap id="dataMap1" baseNode="userInfo">
<w2:keyInfo>
<w2:key id="name" name="이름" dataType="text"/>
<w2:key id="addr" name="주소" dataType="text"/>
<w2:key id="email" name="이메일" dataType="text"/>
</w2:keyInfo>
<w2:data use="true">
<name>홍길동2</name>
<addr>서울시 구로구</addr>
<email>user2@mail.com</email>
</w2:data>
</w2:dataMap>
</w2:dataCollection>
</xf:model>
</head>하위노드 | 설명 | ||
|---|---|---|---|
<w2:keyInfo> | key 정보 | ||
<w2:key> | key 값 | ||
id | ID 고유값 get/set은 사용할 수 없습니다. | ||
name | key 이름 | ||
dataType | 데이터 타입 (number, text, date) 기본값: text | ||
<w2:data> | 실제 데이터 | ||
use | true: 입력된 데이터를 실제 초기값으로 사용 false: WebSquare5 Studio의 Design 탭에만 입력된 데이터를 표시함. | ||
데이터 | 각각의 키에 대한 값을 입력합니다. | ||
생성
Outline – Head 뷰를 선택합니다.
DataCollection을 우클릭한 후, DataMap을 선택합니다.
DataMap 추가
아래와 같은 창이 표시되면, 행 추가 버튼을 클릭하여 Key 정보를 입력합니다. (이미 데이터가 존재할 경우 복사하기-붙여넣기를 하십시오.)
DataMap 정의
데이터 통신 없이 브라우저에 기본값을 표시할 경우 Data 탭을 선택한 후 use data 옆의 첫번째 버튼을 클릭합니다.
데이터 통신 없이 브라우저에 기본값을 표시할 경우 use data를 선택하고, Key 정보에 따라 데이터를 입력합니다.
DataMap에 정의된 형태의 데이터를 출력할 화면을 Design 탭에서 구성합니다.
Key Info 부분에서 Key를 클릭한 후 해당 Key의 바인딩할 컴포넌트로 드래그-앤-드롭합니다.
바인딩된 컴포넌트에 초록색 표시가 나타나는지 확인합니다.
바인딩
미리 보기 버튼을 클릭합니다.
위의 6 ~ 8 단계에서 입력한 데이터가 표시되는지 확인합니다.
실행 화면
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/$p/Submission/executeSubmission_$p_DataMap/)
YouTube 동영상 (https://youtu.be/aMj0Pxyc9Tc)
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/$p/Submission/executeSubmission_$p_DataMap/)
데이터 타입 자동 변경
DataMap에 설정하려는 데이터의 타입과 DataMap 키의 dataType 속성 값이 일치하지 않을 경우, keepDataType 및 preserveType 속성을 사용하여 DataMap 키의 dataType에 따라 데이터를 설정할 수 있습니다.
string 타입 데이터를 number 타입으로 설정 (keepDataType)
string 타입의 데이터를 DataMap에 설정할 때 DataMap 키의 dataType이 "number"인 경우, string 타입의 데이터를 dataType="number" 타입으로 변환하여 DataMap 키에 설정할 수 있습니다. 이 기능을 사용하려면 DataMap의 keepDataType 속성 값을 "true"로 설정하십시오.
YouTube 동영상 (https://youtu.be/G8l864qjL6M)
number 타입 데이터를 string 타입으로 설정 (preserveType)
number 타입의 데이터를 DataMap에 설정할 때 DataMap 키의 dataType이 "string"인 경우, number 타입의 데이터를 dataType="string" 타입으로 변환하여 DataMap 키에 설정할 수 있습니다. 이 기능을 사용하려면 DataMap의 preserveType 속성 값을 "true"로 설정하십시오.
YouTube 동영상 (https://youtu.be/9LetTM_qW-A)
동적 바인딩
setRef() 함수를 사용하여 DataMap과 컴포넌트를 동적으로 바인딩할 수 있습니다.
$r_title(사용 예)
setRef("data:dataMap2.key1");YouTube 동영상 (https://youtu.be/bVHR842dBRQ)
바인딩된 컴포넌트 확인
getRefComponent() 함수를 사용하면 DataMap과 바인딩된 컴포넌트(들)의 ID를 반환할 수 있습니다.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/getRefComponent_DataMap.xml)
YouTube 동영상 (https://youtu.be/DahV6Ymncl4)
공백 데이터 처리
DataMap 공백 데이터를 포함한 경우, 공백 데이터를 공백("")으로 치환하여 반환하거나, 공백 데이터를 제외하고 반환하거나, 혹은, null 값으로 반환할 수 있습니다. DataMap의 nullNYType 속성 값을 아래와 같이 설정하십시오.
"default"(기본 값) : 공백("")으로 치환."exclude": 공백 데이터를 제외하고 반환."null":null로 반환.
DataMap 키(dataMap.key)의 nullNY 속성 설정
DataMap의 nullNYType 속성 설정을 적용하려면, 각 DataMap 키의 (dataMap.key)의 nullYN 속성 값을 "true"로 설정하십시오. nullYN="true" 속성 설정이 적용된 DataMap 키(dataMap.key)만 DataMap의 nullNYType 속성 설정에 따라 공백 데이터가 처리됩니다.
아래 예제는 DataMap과 바인딩된 세 개의 InputBox입니다. DataMap에 nullYNType="true" 설정을 적용한 후, DataMap의 key1 키에 대해서만 nullYN="true" 설정을 적용하여 데이터를 반환할 경우, key1의 공백 데이터는 "null"로 반환되고, key2의 공백 데이터는 공백("")으로 반환되는 것을 확인할 수 있습니다.
nullYNType="null" (DataMap) nullYN="true" (key1 of DataMap)
이벤트
onbeforemodelchange
onbeforemodelchange 이벤트는 데이터 값이 변경되기 직전에 발생하며, rowIndex, colID, oldValue, newValue 값을 JSON 형식으로 받습니다. 이벤트 핸들러가 false를 반환하면, 데이터 변경을 취소하고 예전 값으로 돌아가고, 이외의 경우에는 입력된 값으로 데이터가 변경됩니다.
$r_title(이벤트 핸들러 예시)
scwin.dataMap1_onbeforemodelchange = function(info) {
if (info.newValue == "No_Use") {
return false;
} else {
return true;
}
};예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/onbeforemodelchange_DataMap.xml)
YouTube 동영상 (https://youtu.be/ZQtSdorGgBk)
onkeyset
onkeyset 이벤트는 set() 함수를 사용하여 특정 key의 값을 변경할 때 발생하며, 해다 key와, 이전 값, 그리고 새로 변경되는 값을 반환합니다.
$r_title(이벤트 핸들러 예시)
scwin.dataMap1_onkeyset = function(info) {
var info = JSON.stringify(info);
alert(info);
};YouTube 동영상 (https://youtu.be/Oa7-zFv_BxM)
LinkedDataList
LinkedDataList는 DataList의 데이터를 필터링하거나 정렬한 결과만을 저장하는 객체입니다. DataList 데이터를 필터링하여 아래와 같은 컴포넌트의 선택항목으로 표시할 때 LinkedDataList를 사용하십시오
AutoComplete
CheckBox
CheckComboBox
MultiSelect
Radio
SelectBox
권장 사용법
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/recommended_use_LinkedDataList.xml)
YouTube 동영상 (https://youtu.be/rY_cNEi3exY)
권장 사용법
DataList의 데이터는 1,000 건 이하를 권장하며 최대 10,000건까지 지원합니다.
LinkedDataList는 행 추가, 데이터 일괄 추가, 데이터 전체 삭제 기능을 제외한 DataList에서 지원하는 함수를 모두 지원합니다.
$r_title(linkedDataList 예제) <head> <xf:model> <w2:dataCollection baseNode="map"> <w2:linkedDataList id="linkedDataList1" baseNode="vector" repeatNode="map" valueAttribute="" bind="dataList1"/> <w2:condition type=”filter”><![CDATA[ col1 ==”1” ]]></w2:condition> <w2:condition type=”sort”><![CDATA[DESC('Id')]]> </w2:condition> </w2:dataCollection> </xf:model></head>
속성 | 설명 |
|---|---|
bind | 원본 데이터가 저장된 DataList |
filterCondition | 필터링 조건식 |
sortCondition | 정렬 조건식 |
생성
위의 에서 설명한 것과 동일한 방법으로 DataList를 생성합니다.
다시 [Add]를 클릭합니다.
[LinkedDataList 추가하기]를 선택합니다.
정렬 조건이나 필터링 조건을 입력합니다.
LinkedDataList의
bind속성을 위에서 생성한 DataList로 지정합니다.위의 DataList에서 설명한 것과 동일한 방법으로 컴포넌트를 그리고 생성한 LinkedDataList와 바인딩합니다.
YouTube 동영상 (https://youtu.be/rpn_YyAgUeg)
정렬 및 필터링 조건 설정 (setCondition())
setCondition() 함수를 사용하여 LinkedDataList의 정렬 및 필터링 조건을 설정할 수 있습니다.
정렬
- 조건식
Oracle의 DB SQL문과 동일합니다.
- 초기 생성
LinkedDataList 생성 시 Sort Condition으로 지정.
- 함수
setCondition함수를 사용.
$r_title(Sort 예제 (1))
linkedDataList1.setCondition("sort", "ASC('col0')");$r_title(Sort 예제 (2))
linkedDataList1.setCondition("sort","DESC(‘col0’)");$r_title(Sort 예제 (3))
linkedDataList1.setCondition("sort","DESC(‘col0’) && DESC(‘col1’)");필터링
- 초기 생성
LinkedDataList 생성 시 Filter Condition으로 지정.
- 함수
setCondition함수를 사용.
$r_title(Filter 예제)
var condition = "col1>=2 && col2=='b'";
$p.data.create({
"id": "linkedDataList1",
"type": "linkedDataList",
"option": {
"baseNode": "vactor",
"repeatNode": "list",
"valueAttribute": "",
"bind": "dataList1",
"filterCondition": condition
}
});필터 | 함수 조건식 | 설명 |
|---|---|---|
val | Bno==val('selectbox1') | bind된 data가 selectBox1의 value와 같은 데이터만 표현 |
ref | Bno == ref('data:dataList1.Bno') | bind된 data가 dataList1의 colId ‘Bno’의 데이터 값과 같은 데이터만 표현 |
dafault | Bno == “1” | bind된 data의 colId ‘Bno’가 1인 데이터만 표현 |
비교문 조건식 | 설명 |
|---|---|
A == B | A와 B가 일치하는 데이터 반환 |
A != B | A와 B가 일치하지 않는 데이터 반환 |
A >= B | A가 B보다 크거나 같은 데이터 반환 |
A <= B | A가 B보다 작거나 같은 데이터 반환 |
A > B | A가 B보다 큰 데이터 반환 |
A < B | A가 B보다 작은 데이터 반환 |
(A) && (B) | A 조건과 B 조건이 모두 참인 데이터 반환 |
(A) || (B) | A 조건 또는 B 조건 둘 중 어느 하나가 참이면 데이터 반환 |
예제 (1)
LinkedDataList의 필터링 및 정렬 조건을 설정하는 예제입니다.
YouTube 동영상 (https://youtu.be/aaB2U-mlFXA)
예제 (2)
Radio와 바인딩된 LinkedDataList의 정렬 및 필터링 조건을 설정하는 예제입니다.
$r_title(사용 예 (정렬 조건 설정))
linkedDataList1.setCondition(
"sort", "DESC('ID')"
);$r_title(사용 예 (필터링 조건 설정)) linkedDataList1.setCondition( "filter", "Region == 'Seoul'" );
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/setCondition_LinkedDataList_Radio/)
YouTube 동영상 (https://youtu.be/ryTUYKFiHx8)
setColumnFilter()
setColumnFilter() 함수를 사용하여 LinkedDataList의 데이터를 필터링할 수 있습니다.
$r_title(사용 예 (Hobby 컬럼의 값이 "Movie"인 데이터만 필터링))
linkedDataList1.setColumnFilter({
type: ‘row’,
colIndex: ‘Hobby’,
key: ‘Movie’,
condition: ‘and’
});예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/setColumnFilter_LinkedDataList/)
YouTube 동영상 (https://youtu.be/J_Nx89_G3FM)
Studio에서 생성하고 디버깅 메뉴로 확인하기
Studio에서 DataList, DataMap, LinkedDataList를 생성한 후, 웹스퀘어가 제공하는 디버깅 메뉴를 이용하여 생성한 DataList, DataMap, LinkedDataList의 데이터를 확인할 수 있습니다.
Studio의 Outline 뷰 – Head 탭에서 DataCollection을 우클릭한 후, 각 메뉴를 선택하여 DataMap, DataList, LinkedDataList를 생성할 수 있습니다.
DataMap, DataList, LinkedDataList를 생성한 페이지를 브라우저에 로딩한 후, Ctrl 버튼을 누른채로 마우스를 우클릭하면 아래와 같이 디버깅 메뉴가 표시됩니다. View dataCollection 메뉴를 선택하여 생성한 DataMap, DataList, LinkedDataList를 확인할 수 있습니다.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/_DataCollection/dataList_dataMap_linkedDataList.xml)
YouTube 동영상 (https://youtu.be/bGIxYMKQlCA)