Flex dataGrid 中TAB键 定位问题
实例代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="700" verticalScrollPolicy="on">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.*;
import mx.events.AdvancedDataGridEvent;
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
[Bindable]
private var data1:ArrayCollection = new ArrayCollection([{xh:1},{xh:2},{xh:3},{xh:4},{xh:5},{xh:6}]);
private function itemEditBeginHandler(event:AdvancedDataGridEvent):void
{
var rowIndex:int = event.rowIndex;
var colIndex:int = event.columnIndex;
var record:Object = data1.getItemAt(rowIndex);
if( colIndex == 2 ){
event.stopImmediatePropagation();
}
}
]]>
</mx:Script>
<mx:Canvas verticalScrollBarStyleName="hh" height="614" width="831.5" horizontalCenter="-1" verticalCenter="0" verticalScrollPolicy="auto">
<mx:AdvancedDataGrid id="dg1" designViewDataType="flat" sortExpertMode="true" sortableColumns="false" rowCount="5"
dataProvider="{data1}" height="441" width="811.5" fontSize="14" fontFamily="Times New Roman" editable="true"
enabled="true" x="10" y="55"
itemEditBegin="itemEditBeginHandler(event)" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="序号" dataField="xh" width="150" editable="false"/>
<mx:AdvancedDataGridColumn headerText="COLUMN1" dataField="col1" width="200" />
<mx:AdvancedDataGridColumn headerText="COLUMN2" dataField="col2" width="200" />
<mx:AdvancedDataGridColumn headerText="COLUMN3" dataField="col3" width="200" />
<mx:AdvancedDataGridColumn headerText="COLUMN4" dataField="col4" width="200" />
<mx:AdvancedDataGridColumn headerText="COLUMN5" dataField="col5" width="200" />
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Canvas>
</mx:Application>
拷贝运行即可,问题是当光标在COLUMN1时按TAB键,由于运行了itemEditBeginHandler函数,光标跳出dataGrid,想要的效果是光标定位到下一个可以编辑的单元格(即COLUMN3),请问如何实现,谢谢
[解决办法]
你看看下面的代码,里面多增加了几个功能,就是用上下左右键也能到下一个编辑单元,里面控制了边界问题。效果应该没问题,你看看吧。
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="700" verticalScrollPolicy="on" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.controls.ComboBox; import mx.controls.Alert; import mx.events.*; import mx.events.AdvancedDataGridEvent; import mx.collections.ArrayCollection; import mx.controls.dataGridClasses.DataGridColumn; [Bindable] private var data1:ArrayCollection=new ArrayCollection([{xh: 1}, {xh: 2}, {xh: 3}, {xh: 4}, {xh: 5}, {xh: 6}]); private function init():void { dg1.addEventListener(FocusEvent.KEY_FOCUS_CHANGE,keyFocusChangeHandler); } private function itemEditBeginHandler(event:AdvancedDataGridEvent):void { var rowIndex:int=event.rowIndex; var colIndex:int=event.columnIndex; var record:Object=data1.getItemAt(rowIndex); if (colIndex == 2) { event.stopImmediatePropagation(); } } private function keydownDataGrid(event:KeyboardEvent):void { try{ var position:Object = dg1.editedItemPosition; var offsetRow:int = 0; var offsetCol:int = 0; //tab if(event.keyCode == Keyboard.TAB){ if (event.shiftKey) { offsetCol = -1; } else { offsetCol = 1; } } else if (event.keyCode == Keyboard.UP){ offsetRow = -1; } else if (event.keyCode == Keyboard.DOWN){ offsetRow = 1; } else if (event.keyCode == Keyboard.LEFT){ offsetCol = -1; } else if (event.keyCode == Keyboard.RIGHT){ offsetCol = 1; } else { return; } dg1.editedItemPosition = findNextEditableCell(position,offsetRow,offsetCol); } catch(e:Error) { trace(e.message); } } private function findNextEditableCell(v:Object,offsetRow:int=0,offsetCol:int=0):Object { if (v == null || (offsetRow == 0 && offsetCol == 0) || (offsetRow != 0 && offsetCol != 0)) { return null; } var loopCount:int = 0; var dataEditable:Boolean = false; while (!dataEditable && (loopCount < 2)) { if (offsetCol != 0) { if ((v.columnIndex + offsetCol) < dg1.columns.length && (v.columnIndex + offsetCol) >= 0) { v.columnIndex = v.columnIndex + offsetCol; } else { if ((v.rowIndex + offsetCol) < dg1.dataProvider.length && (v.rowIndex + offsetCol) >= 0) { v.rowIndex = v.rowIndex + offsetCol; if (offsetCol > 0) { v.columnIndex = 0; } else { v.columnIndex = dg1.columns.length -1; } } else { if (offsetCol > 0) { v.columnIndex = 0; v.rowIndex = 0; } else { v.columnIndex = dg1.columns.length -1; v.rowIndex = dg1.dataProvider.length -1; } loopCount ++; } } } else { if ((v.rowIndex + offsetRow) < dg1.dataProvider.length && (v.rowIndex + offsetRow) >= 0) { v.rowIndex = v.rowIndex + offsetRow; } else { if (offsetRow > 0) { v.rowIndex = 0; } else { v.rowIndex = dg1.dataProvider.length -1; } loopCount ++; } } if (dg1.columns[v.columnIndex] != null && dg1.columns[v.columnIndex].editable) { if (v.columnIndex != 2) { dataEditable = true; } else { dataEditable = false; } } } return v; } private function keyFocusChangeHandler(event:FocusEvent):void { if (event.keyCode == Keyboard.TAB) { event.preventDefault(); } } ]]> </mx:Script> <mx:Canvas verticalScrollBarStyleName="hh" height="614" width="831.5" horizontalCenter="-1" verticalCenter="0" verticalScrollPolicy="auto"> <mx:AdvancedDataGrid id="dg1" designViewDataType="flat" sortExpertMode="true" sortableColumns="false" rowCount="5" dataProvider="{data1}" height="441" width="811.5" fontSize="14" fontFamily="Times New Roman" editable="true" enabled="true" x="10" y="55" itemEditBegin="itemEditBeginHandler(event)" keyDown="keydownDataGrid(event)"> <mx:groupedColumns> <mx:AdvancedDataGridColumn headerText="序号" dataField="xh" width="150" editable="false"/> <mx:AdvancedDataGridColumn headerText="COLUMN1" dataField="col1" width="200"/> <mx:AdvancedDataGridColumn headerText="COLUMN2" dataField="col2" width="200"/> <mx:AdvancedDataGridColumn headerText="COLUMN3" dataField="col3" width="200"/> <mx:AdvancedDataGridColumn headerText="COLUMN4" dataField="col4" width="200"/> <mx:AdvancedDataGridColumn headerText="COLUMN5" dataField="col5" width="200"/> </mx:groupedColumns> </mx:AdvancedDataGrid> </mx:Canvas></mx:Application>