1.1 Dojo Formatter & Cell Style Example Code
|
<!DOCTYPE html> <html > <head>
<style> #gridDiv { height: 20em; width : 50em; } .FontRed { color: #FF0000; } </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','dojox/math/round', 'dojo/domReady!'], function( DataGrid, ItemFileWriteStore){ var data = { items: [] }; var data_list = [ { col1: "normal", col2: 10, col3: 'But are not followed by two hexadecimal', col4: 29.91}, { col1: "important", col2: 2, col3: 'Because a % sign always indicates', col4: 9.33}, { col1: "important", col2: 7, 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', formatter: function(fields){ return fields + " <em> status</em>"; }}, {'name': 'Column 2', 'field': 'col2', 'width': '100px', formatter: function(fields){ this.customStyles.push("background-color: #41AF39;"); this.customStyles.push("font-weight: normal;"); if(fields > 5) { this.customStyles.push("background-color: #FFE400;"); this.customStyles.push("text-align: center;"); this.customStyles.push("font-weight: bold;"); }
return fields; } }, {'name': 'Column 3', 'field': 'col3', 'width': '200px', classes: "FontBold"}, {'name': 'Column 4', 'field': 'col4', 'width': '150px', styles: "text-align: center;"}, {'name': 'Column 5', 'field': '_item', 'width': '150px', cellStyles: "text-align: right;", formatter: function(item, rowIndex, cell){ var store2 = cell.grid.store, ba = store2.getValue(item, "col2") / store.getValue(item, "col4"); return dojox.math.round(ba, 3); } } ]];
/*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 2 Formatter & Cell Style Example Code
1.2 Code 설명
Formatter 함수는 보통 데이터를 가공해야 할 때 쓰인다. 여기서는 각각의 셀에 대하여 if문을 줘서 색깔을 주는데에도 쓰였다. Formatter는 3개의 argument를 호출할 수 있는데 cell에 대한 데이터 값, cell의 row Index, 그리고 cell에 대한 object 그 자체이다.
column 1의 경우 받은 data에서 뒤에 문자열 status를 붙이고 출력하도록 설정하였고, column2는 background와 font-weight를 설정하면서 data값이 5이상일 때 다른 style이 들어가도록 설정하였다. column3은 css style class를 이용해 font 색상을 바꾸었다. column5는 따로 생성한 column인데 같은 row에 있는 cell들의 data값을 이용하여 새로운 data를 만들었다. 주의할 점은 'field' 값을 무조건 _item으로 설정해야 적용된다는 점이다. 즉 기존에 있는 column에서 row 한줄만 다른 데이터의 값을 받아와 가공해서 보여주는 것은 불가능하다.
1.3 결과 화면
Figure 2 Table 2의 결과 화면
'Dojo > Datagrid' 카테고리의 다른 글
| 3. Dojo Datagrid Row event (0) | 2013.08.08 |
|---|---|
| 1. Dojo Simple Datagrid (0) | 2013.08.08 |