1.1 Dojo Simple Datagrid code
|
<!DOCTYPE html> <html > <head> <style> #gridDiv { height: 20em; width : 50em; } </style> <link rel="stylesheet" href="dojo-release-1.9.1/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="dojo-release-1.9.1/dojox/grid/resources/claroGrid.css"> <script src='dojo-release-1.9.1/dojo/dojo.js'></script> <script> require([ 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/domReady!'], function( DataGrid, ItemFileWriteStore){ var data = { items: [] }; var data_list = [ { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91}, { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33}, { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34} ]; data.items.push(data_list[0]); data.items.push(data_list[1]); data.items.push(data_list[2]); var store = new ItemFileWriteStore({data: data}); /*set up layout*/ var layout = [[ {'name': 'Column 1', 'field': 'col1', 'width': '100px'}, {'name': 'Column 2', 'field': 'col2', 'width': '100px'}, {'name': 'Column 3', 'field': 'col3', 'width': '200px'}, {'name': 'Column 4', 'field': 'col4', 'width': '150px'} ]]; /*create a new grid*/ var grid = new DataGrid({ id: 'grid', store: store, structure: layout, rowSelector: '20px'}); /*append the new grid to the div*/ grid.placeAt("gridDiv"); /*Call startup() to render the grid*/ grid.startup(); }); </script> </head> <body class="claro"> <div id="gridDiv"></div> </body> </html> |
|
Table 1 Dojo Simple Datagrid code |
1.2 Code 설명
우선 Grid에 대한 테마를 따로 호출해야 함을 볼 수 있다. 요구된 모듈들은 DataGrid, ItemFileWriteStore 두 가지이다. DataGrid는 표를 만들어주기 위해, ItemFileWriteStore는 JSON 형태로 데이터를 저장하는 모듈인데 데이터를 저장하기 위해 요구되었다. data 배열 변수는 JSON 형태로 값을 초기화 시키며 data_list들을 items.push 함수로 데이터를 입력하고 있다. 다음으로 var store에 dojo/store uniform interface 형태로 저장하고 있는 모습이다. data : data 에서 오른쪽의 data가 var data의 변수 이름이다. 그래프의 형태를 만들기 위해서 각각의 column에 대하여 layout을 정해주는데 name은 column의 header cell이며 field는 데이터 레코드들의 필드 이름이다. 그리고 grid를 생성할때는 grid에 대한 id를 정해주고 해당 grid에 대한 데이터를 설정해주며 grid에 대한 structure를 지정해준다. structure이 만든 layout을 썼다. rowSelector는 table결과화면에서 왼쪽에 있는 칸들이다.
1.3 결과 화면
Figure 1 Table 1 결과 화면
'Dojo > Datagrid' 카테고리의 다른 글
| 3. Dojo Datagrid Row event (0) | 2013.08.08 |
|---|---|
| 2. Dojo Formatter Function & Cell Style (0) | 2013.08.08 |