설명
GRID 스타일의 컴포넌트는 dx5.create 함수를 사용하여 컴포넌트 생성할 때 'style' 파라미터를 'grid'로 설정하여 만들 수 있다.
GRID 스타일은 LIST 스타일과 동일한 GUI를 가지며 추가로 사용자 정의 열을 만들 수 있도록 지원한다.
사용자 정의 열은 고유의 키가 부여되는데 이 키는 각 파일 항목의 메타데이터 이름과 같고, 메타데이터를 사용하는 방식으로 값을 설정할 수 있다.
'name, size, op'는 키 값으로 사용할 수 없는 문자열이다.
// 'text' 형식의 사용자 정의 열 생성하기
dx.createColumn({ key: "composer", display: "작곡가", width: 80, position: 2 });
// 'list' 형식의 사용자 정의 열 생성하기
dx.createColumn({ key: "country", display: "나라", width: 80, position: 3, type: "list", items: [
{ display: "오스트리아", value: "AT" },
{ display: "독일", value: "DE" },
{ display: "이탈리아", value: "IT" },
{ display: "러시아", value: "RU" },
{ display: "기타", value: "NN" }
]
});
// 'meta' 속성을 사용하여 메타데이터를 등록할 수 있다.
dx.addVirtualFileList([
{ ..., name: "운명.mp3", ..., meta: { "composer": "베토벤", "country": "DE" } },
{ ..., name: "주피터.mp3", ..., meta: { "composer": "모차르트", "country": "AT" } },
{ ..., name: "미완성.mp3", ..., meta: { "composer": "슈베르트", "country": "AT" } },
{ ..., name: "비창.mp3", ..., meta: { "composer": "차이코프스키", "country": "RU" } },
{ ..., name: "사계.mp3", ..., meta: { "composer": "비발디", "country": "IT" } }
]);
'list' 형식의 사용자 정의 열은 드롭다운리스트와 같은 UI 컴포넌트가 아니다.
예제
사용자 정의 열 추가 |
||||||||||||||
|
사용자 정의 열은 createColumn 메소드를 사용하여 생성할 수 있다. 이 메소드는 항목들을 추가하는 작업보다 우선적으로 호출되어야 한다. 사용자 정의 열의 형식은 'text, list' 두 가지가 있는데, 예제에서는 'text' 형식만 소개한다. 파일 열의 키는 'name', 크기 열의 키는 'size', 상태 열의 키는 'op'로 미리 정해져 있어 사용할 수 없다. 만약 키 이름이 같으면, 기존 설정을 덮어쓰게 된다. 그러나 'name, size, op'는 설정을 덮어쓸 수 없다.
Internet Explorer 브라우저는 열의 값으로 오로지 텍스트만 표현할 수 있다. |
||||||||||||||
사용자 정의 열 값 등록/수정/삭제 |
||||||||||||||
|
사용자 정의 열의 값을 설정하는 것은 메타데이터를 사용하는 방법과 동일하다. 가상 파일은 addVirtualFile, addVirtualFileList로 등록할 때, 'meta' 속성을 사용하면 메타데이터를 설정할 수 있다. 로컬 파일의 경우 등록 시점에 'meta' 속성을 사용할 수 없으므로 setMetaDataByIndex, setMetaDataById 같은 메소드를 사용해서 직접 설정(가상 파일도 가능)해야 한다. 만약 로컬 파일을 등록과 동시에 사용자 정의 열 값을 설정하려면 onDX5ColumnDataBinding이라는 이벤트 핸들러를 사용할 수 있다. (자세한 부분은 소스를 참고한다.)
|
||||||||||||||
사용자 정의 열 보이기/숨기기/삭제 |
||||||||||||||
|
파일(name) 열은 숨기기가 안돼고 크기(size), 상태(op) 열은 숨기기가 가능하다. 파일(name), 크기(size), 상태(op) 열은 삭제할 수 없다.
|
||||||||||||||