flex datagrid tab键不好用的问题
状况:
比如:datagrid 绑定的数据源有四行数据,其中第二行为不可编辑(用event.stopImmediatePropagation()或dg1.editedItemPosition=null) ,在这种情况下,tab只能在第一行好用,继续按tab会跳出去,然后,按够列数次tab键后,光标才有可能跳到第三行。
我想,直接按一次tab就跳过不可编辑的行到下一行,怎么解决呢??
[解决办法]
给你参考这个。
<?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>
[解决办法]
<?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>