트리 그리드(TreeGrid)를 만들기 위해
다음 그림과 같이 데이터를 화면에 출력하는 방법부터 시작한다.
그림과 같이 3개의 데이터를 화면에 출력하기 위해서는
다음의 html처럼
테이블(table) 태그를 사용해서 웹 페이지를 작성한다.
이렇게 웹 페이지에 테이블 태그를 작성해 두고 사용하는 것은
고정된 문서(구성)으로 사용하는 것으로,
트리 형태로
데이터를 들여쓰기 하고
하위 노드를 숨겼다 보여주는 동적인 기능을 구현하기 어렵다.
따라서, 다음 코드와 같이
자바스크립트(JavaScript, JS)를 이용하여
테이블 태그를 생성하고 조절하여
동적 웹 페이지를 제작하게 된다.
sample1.html먼저, 11 라인과 16 라인에서
option과 data라는 배열 변수를 선언하고 초기값을 주었다.
option변수는 트리 그리드의 각 열(column)을 필드로 보고
각 필드의 특성을 지정하는 변수로 사용한다.
즉, 배열 크기가 3 개 이므로 3 개의 필드를 사용한다.각 배열은 Json으로 구성되었고,
필드의 구체적인 정보를 담고 있다 (예제라 width 하나 뿐임).
필드명은 작업명(task), 시작일자(startdate), 종료일자(enddate)이고
각각의 크기는 200px, 100px, 100px로 지정하였다.
이 필드들은 테이블 태그의 열(td)로 생성되게 된다.
배열 data 변수는 그리드에 출력한 데이터를 담은 변수로
하나의 인자가 하나의 데이터, 즉 행(row, line)이 되고
예제에서 배열 크기가 3 이니 데이터 개수는 3 이 된다.
필드 구성은 앞서 구성한 option 변수에서 선언한 필드에
값을 주어 구성한다.
option 변수에서 선언하지 않은 필드를 사용해도 되며,
이 경우는 숨겨진 필드로
보이진 않지만 프로그램 처리상 필요한 역할을 할 수 있다.
option과 data 변수는
필드명(task, startdate, enddate)으로 서로 찾게 되고
data 변수의 값들을 출력하면서,
option의 속성(width)을 가져와서 화면을 구성하게 된다 (31, 32 라인).
다음으로 코드의 23~25 라인에 사용된 JQuery는
동적으로 테이블(Table) 태그를 생성하고,
id가 tree(#tree)인 div (39 라인)에 추가하는 코드이다.
이렇게 해서 지정된 위치(사용자가 원하는 위치)에 TreeGrid가 생성된다.
마지막으로 27 ~34 라인이 데이터를 화면에 출력하는 코드이다.
데이터를 화면에 출력하는 방법은
데이터의 개수만큼 반복하면서(for, each)
한 데이터가 가진 필드들(for, each)의 값을 출력하면 된다.
출력 방식은 테이블 테그를 사용하기 때문에
행은 TR,
열은 TD를 동적으로 생성하여 구현하게 된다.
즉, 데이터(data) 변수의 크기 만큼 반복하면서 $.each( data, function( index, row)
TR 태그를 생성해서 행을 출력하고 var tr = $("<tr>").appendTo(table)
필드 개수만큼 반복해서 $.each( option, function( i, fieldInfo)
TD 태그를 생성한다. var td = $("<td>").appendTo(tr)
앞서 option 과 data 변수는
필드명(task, startdate, enddate)으로 서로 찾는 다고 설명했는 데,
생성한 TD에 필드 값을 출력하기 위해
option의 필드명(field)으로
현재 data의 출력하려고 하는 행(row)에서 값을 찾아와 row[fieldInfo.field]
TD에 넣어준다(html).
참고: 두개의 each문이 사용되었다.
$.each( data, function( index, row)
$.each( option, function( i, fieldInfo)
배열 변수인 data, option의 개수 만큼 반복해서 실행하는 JQuery 문법으로
콜백 함수의 첫 번째 파라메터 index와 i는 배열의 몇 번째 데이터인지
row와 fieldInfo는 배열 중 각 인자의 값이 넘겨 진다.
data는 각각의 행(노드 값)이 넘어오고 하나의 행은 Json으로 구성되어 있다.
option는 각 필드 정보의 행이 Json으로 넘겨진다.
따라서 each문 안에서
option은 fieldInfo.field, fieldInfo.width로 사용되고
data는 row.task, row.startdate, row.enddate로 사용된다.
또, Json 데이터는 fieldInfo["field"], row["task"] 같이
배열처럼 사용할 수 있다.
31 라인에서는 이 코드를 혼용해서 사용했다. td.html( row[fieldInfo.field]);
이상의 코드를 실행하면,
앞서 HTML의 테이블 태그로만 작성된 코드가 생성된다.
즉, 두 개의 코드를 실행한 결과가 같다는 것으로
하나는 HTML만으로,
하나는 JS를 이용해서 생성한 것이다.
웹 브라우저의 DOM 탐색기(F12)를 실행해서
JS로 생성된 HTML코드를 확인해 보자
JQuery 기초 문법 몇 가지
$("#tree")처럼 문자열에 #을 사용하면
HTML 태그 ID가
지정된 문자열(tree)과 일치하는 태그를 찾아서 반환한다.
반환된 클래스는 HTML 태그의 기능 외에
JQuery에서 제공하는 부가적인 기능도 추가되어 있다.
즉, JQuery 문법으로 클래스를 사용하게 된다.
$("<table>")처럼 꺽쇠(<>)를 사용하면
해당 HTML 태그를 생성해서 JQuery 클래스가 반환된다.
여기에는 사용되지 않았지만(다음 예제들에 나옴)
$(".treegrid9-1")처럼 점(.)을 사용하면
해당 문자열을 CSS의 클래스 명(Classname)으로 사용하는
HTML 태그를 찾아서 JQuery 클래스로 반환된다.
#과 유사하게 사용되는데
#은 ID를 찾는 것이고
점(.)은 클래스 명에서 찾는 것이다.
주의: 자바 스크립트의 클래스와 CSS의 클래스를 헷갈린다면 TreeGrid 제작 관련 내용이 도움이 안 될 수도 있다.
JQuery에 대한 간단한 설명은 검색을 해보거나 여기를 참조하면 된다.
'JavaScript > TreeGrid' 카테고리의 다른 글
| 1. 자바스크립트로 만드는 TreeGrid (0) | 2017.01.14 |
|---|---|
| 3. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 I (0) | 2017.01.14 |
| 4. 데이터(JSON)를 트리형(계층형)으로 보여 주기 위해 들여쓰기 II (0) | 2017.01.14 |
| 5. 라이브러리화 (0) | 2017.01.14 |
| 6. 클릭시 자식 노드 숨기기 (0) | 2017.01.14 |