Dojo Datagrid Row event 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();
grid.on("RowClick", function(evt){ var idx = evt.rowIndex, rowData = grid.getItem(idx); // The rowData is returned in an object document.getElementById("results").innerHTML = "You have clicked on " + rowData.col1 + ", " + rowData.col2 + "."; }, true);
}); </script> </head> <body class="claro"> <div id="gridDiv"></div> <div id="results"></div> </body> </html> |
Table 3 Datagrid Row event Code
코드 설명
grid.on("Rowclick", function(evt){}); 에서 Rowclick의 옵션을 변경이 가능하다 변경가능 목록은 Table 4와 같다. function(evt)안에 document.getelementbyid나 Dom.byId로 rowdata값을 textbox나 combo box안에 넣는 것도 가능하다.
|
Row HeaderCell Cell |
|
RowClick HeaderCellClick CellClick RowContextMenu HeaderCellContextMenu CellContextMenu RowDblClick HeaderCellDblClick CellDblClick RowFocus HeaderCellFocus CellFocus RowMouseDown HeaderCellMouseDown CellMouseDown RowMouseOut HeaderCellMouseOut CellMouseOut RowMouseOver HeaderCellMouseOver CellMouseOver |
Table 4 Datagrid Event List
결과 화면
Figure 3 Table 4 결과 화면
'Dojo > Datagrid' 카테고리의 다른 글
| 2. Dojo Formatter Function & Cell Style (0) | 2013.08.08 |
|---|---|
| 1. Dojo Simple Datagrid (0) | 2013.08.08 |