dojox.grid.DataGrid Programming (2) – Methods and events
The dojox.grid.DataGrid component also provides some methods by which users can further enrich the performance experience of the table.
Reference from ：Http://www.educity.cn/wenda/370866.html
1. Get and modify the data of any cell:
Get the first Line 3, the value of the field “f3”
var grid = dijit.byId(“grid1”); var row = grid.getItem(3); // Get the value var value = grid.store.getValue(row, “f3”); // Modify the value grid.store. setValue(row, “f3”, “abc”);
< span style="color:rgb(34,34,34); font-family: Microsoft Yahei; font-size:14px; line-height:24px">Or write directly as
var grid = dijit.byId(“grid1”); var row = grid.getItem(3); var value = row[“f3”];
Note: By default, every time you modify the value, it will cause the Grid line Refresh
2. Get (un)select OK
var grid = dijit.byId(“grid1”); var selectedRows = grid.selection.getSelected(); var value = selectedRows [0][“f3”];
Because multiple selection is supported, grid.selection.getSelected returns an array of selected rows.
// Get the first row of selection grid.selection.getFirstSelected(); // Clear all selected rows grid.selection.deselectAll( ); // Select the nth row grid.selection.select(4);
3. Set cell focus
< /span>
// Set the focus of the cells in the first row and second column grid.focus.setFocusIndex(0, 1);
< span style="margin:0px; padding:0px; list-style:none; color:rgb(34,34,34); font-family:Microsoft Yahei; font-size:14px; line-height:24px"> 4. Display a line in the view
// Scroll to display the fourth line grid.scrollToRow(3);
5. Hide a column
// hide the fifth column grid.layout.setColumnVisibility(4, false);
6. Change the line display onStyleRow (parameter: row object)
dojo. connect(grid, “onStyleRow”, function(row) {// The background of the second row is set to red if (row.index == 1) {row.customClasses += “redRow “;} }); grid.resize() ;
7. Row click event onRowClick (parameter: Event object)
dojo.connect(grid, “onRowClick”, function(e) {alert(e.rowIndex); });
In addition: the Enter key can also trigger the onRowClick event.
but there is a bug here, up and down keys When moving, the selected row will not follow. At this time, when you press Enter, e.rowIndex === undefined. How to solve this bug will be introduced later.
(Improved EnhancedGrid when moving up and down , The selected line will follow)
8. Row selection event onSelected (parameter: row index)
dojo.connect (grid, “onSelected”, function(index) {alert(index); });
It will be triggered if the selected line changes.
9. Cell click event onCellClick (Parameter: Event object)
dojo.connect(grid, “onCellClick”, function(e) {console.log(“[” + e.rowIndex + “,” + e.cellIndex + “]”); //rowIndex=-1 is the header if (e.rowIndex <0) return; e.cellNode.style.backgroundColor = "red";} );
10. Full selection code example:
|
|
Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | Column 6 |
|---|
JavaScript: The following method is triggered when the Checkbox of the header is clicked.
var cacheCheck = false; function changeAll(checkbox) {var grid = dijit.byId(“grid1”); for(var i= 0, row; (row=grid.getItem(i)); i++) {grid.store.setValue(row, “f0”, checkbox.checked);} cacheCheck = checkbox.checked; }
Note: When the table column width changes (that is, drag and drop to adjust the column width) It will cause the grid to be redrawn, so cacheCheck is used above to keep the checked state of the Checkbox of the table header.
Set it back in onResizeColumn actually.
dojo.connect(grid, “onResizeColumn”, function(cellIdx) {dojo.byId(“chk”).checked = cacheCheck; });
Continue to add
— End of this chapter–