首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex dataGrid 中TAB键 定位有关问题

2012-02-21 
Flex dataGrid 中TAB键 定位问题实例代码如下:?xml version1.0 encodingutf-8?mx:Application xm

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 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> 

热点排行