读书人

flex datagrid tab键不好用的有关问题

发布时间: 2012-03-02 14:40:29 作者: rapoo

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

[解决办法]
给你参考这个。

XML code
<?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>

读书人网 >flex

热点推荐