Flex 使用方向键控制光标位置

最新推荐文章于 2019-07-28 20:12:46 发布

转载最新推荐文章于 2019-07-28 20:12:46 发布 · 669 阅读

文章标签：

#flex

Flex 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在FlexGrid中实现特定列编辑的禁用，并通过键盘进行数据格单元间的导航。通过自定义事件监听及键盘事件处理，确保用户不能编辑指定列，并能顺畅地使用键盘Tab键等进行焦点移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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