flex datagrid Tab键事件

最新推荐文章于 2019-03-02 15:32:26 发布
最新推荐文章于 2019-03-02 15:32:26 发布
阅读量1.6k 收藏
点赞数
分类专栏： flex 文章标签： datagrid flex button function library import
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        
        <![CDATA[
        
        import mx.controls.Alert;
        
        import mx.collections.XMLListCollection;
        
        
        
        private var xml:XML = <root><vo column1='A1' column2='B1' column3='C1' column4='D1'/>
        
        <vo column1='A2' column2='B2' column3='C2' column4='D2'/>
        
        <vo column1='A3' column2='B3' column3='C3' column4='D3'/></root>;
        
        [Bindable]
        
        private var dp:XMLListCollection = new XMLListCollection(xml.vo);
        
        [Bindable]
        
        private var text1:String = "";
        
        [Bindable]
        
        private var text2:String = "";
        
        
        
        //------------------------- section 1 ----------------------
        
        private function firstKeyDown(event:KeyboardEvent):void{
        
        try {
        
        //click tab
        
        if(event.keyCode == Keyboard.TAB && event.shiftKey){
        
        end_1.setFocus();
        
        return;
        
        }
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_2.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_4.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }                          
        
        }
        
        private function secondKeyDown(event:KeyboardEvent):void{
        
        try {
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_3.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_1.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }  
        
        }
        
        private function thirdKeyDown(event:KeyboardEvent):void{
        
        try {
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_4.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_2.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }  
        
        }
        
        private function fouthKeyDown(event:KeyboardEvent):void{
        
        try {                        
        
        //click tab
        
        if(event.keyCode == Keyboard.TAB && !event.shiftKey){
        
        start_1.setFocus();
        
        return;
        
        }
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_1.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_3.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }  
        
        }
        
        //~------------------------- section 1 end----------------------
        
        
        
        
        
        //------------------------- section 2 ------------------------
        
        private function keydown11(event:KeyboardEvent):void{
        
        try {
        
        
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_22.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP
        
        ||(event.keyCode == Keyboard.TAB && event.shiftKey)) {
        
        dataGrid.setFocus();
        
        dataGrid.editedItemPosition={columnIndex:dataGrid.columns.length-1,rowIndex:dataGrid.dataProvider.length-1};
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }
        
        }
        
        private function keydown12(event:KeyboardEvent):void{
        
        try {
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_23.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_21.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }
        
        }
        
        private function keydown13(event:KeyboardEvent):void{
        
        try {
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN){
        
        comp_24.setFocus();
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_22.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }
        
        }
        
        private function keydown14(event:KeyboardEvent):void{
        
        try {
        
        if(event.keyCode == Keyboard.RIGHT || event.keyCode == Keyboard.DOWN
        
        ||(event.keyCode == Keyboard.TAB && !event.shiftKey)){
        
        dataGrid.setFocus();
        
        dataGrid.editedItemPosition={columnIndex:0,rowIndex:0};
        
        return;
        
        } else if(event.keyCode == Keyboard.LEFT || event.keyCode == Keyboard.UP) {
        
        comp_23.setFocus();
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }
        
        }
        
        private function keydownDataGrid(event:KeyboardEvent):void{
        
        try{
        
        var v:Object = dataGrid.editedItemPosition;
        
        var ti:TextInput = TextInput(dataGrid.itemEditorInstance);
        
        //tab
        
        if(event.keyCode == Keyboard.TAB){
        
        if(!event.shiftKey){
        
        if(v!=null && v.rowIndex ==dataGrid.dataProvider.length - 1 && v.columnIndex==dataGrid.columns.length-1){
        
        start_2.setFocus();
        
        }
        
        }else{
        
        if(v!=null && v.rowIndex == 0 && v.columnIndex==0){
        
        end_2_1.setFocus()
        
        }
        
        }
        
        }
        
        if(event.keyCode == Keyboard.DOWN){
        
        if(v.rowIndex < dataGrid.dataProvider.length-1){
        
        v.rowIndex++;
        
        dataGrid.editedItemPosition = v;
        
        }else{
        
        comp_21.setFocus();
        
        }
        
        }else if(event.keyCode == Keyboard.RIGHT){
        
        if(v.columnIndex < dataGrid.columns.length - 1){
        
        v.columnIndex++;
        
        dataGrid.editedItemPosition = v;                                       
        
        } else {
        
        comp_21.setFocus();
        
        }                           
        
        } else if(event.keyCode == Keyboard.UP){
        
        if(v.rowIndex==0){
        
        comp_24.setFocus();
        
        }else{
        
        v.rowIndex --;
        
        dataGrid.editedItemPosition = v;
        
        }
        
        }else if(event.keyCode == Keyboard.LEFT){                                    
        
        if(v.columnIndex == 0){
        
        comp_24.setFocus();                                        
        
        }else{
        
        v.columnIndex --;
        
        dataGrid.editedItemPosition = v;
        
        }
        
        }
        
        } catch(e:Error) {
        
        trace(e.message);
        
        }
        
        }
        
        private function dataGridFocusIn(event:FocusEvent):void{
        
        try{
        
        var ti:TextInput = TextInput(dataGrid.itemEditorInstance);
        
        if(ti){
        
        text2 = ti.text;
        
        }
        
        }catch(e:Error){
        
        trace(e.message);
        
        }
        
        }
        
        ]]>
        
    </fx:Script>
    
    <mx:Panel title="Tab键; Shift+Tab; 方向键切换界面元素例子" verticalGap="20"
              
              width="100%" height="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
        
        <mx:VBox width="100%" height="60" borderStyle="solid">
            
            <mx:HBox width="100%" height="20">
                
                <mx:Label text="Section One 循环切换:" fontSize="13"/>
                
                <mx:Spacer width="50"/>
                
                <mx:Label text="{text1}" fontSize="13" fontWeight="bold" color="0xC42B25"/>
                
            </mx:HBox>
            
            <mx:HBox width="100%" height="100%">
                
                <mx:Button id="start_1" width="1" height="1" label="a" tabEnabled="true" tabIndex="0"/>
                
                <mx:TextInput id="comp_1" text="First" tabEnabled="true" tabIndex="1"
                              
                              keyDown="firstKeyDown(event)" width="100" focusIn="{text1=comp_1.text}"/>
                
                <mx:Label text="->"/>
                
                <mx:Button id="comp_2" label="Second" tabEnabled="true" tabIndex="2"
                           
                           keyDown="secondKeyDown(event)" focusIn="{text1=comp_2.label}"/>
                
                <mx:Label text="->"/>
                
                <mx:Button id="comp_3" label="Third" tabEnabled="true" tabIndex="3"
                           
                           keyDown="thirdKeyDown(event)" focusIn="{text1=comp_3.label}"/>
                
                <mx:Label text="->"/>
                
                <mx:TextInput id="comp_4" text="Fouth" tabEnabled="true" tabIndex="4"
                              
                              keyDown="fouthKeyDown(event)" width="100" focusIn="{text1=comp_4.text}"/>
                
                <mx:Button id="end_1" width="1" height="1" label="b" tabEnabled="true" tabIndex="5"/>
                
            </mx:HBox>
            
        </mx:VBox>       
        
        <mx:VBox width="100%" height="100%" borderStyle="solid">
            
            <mx:HBox width="100%" height="20">
                
                <mx:Label text="Section Two 循环切换:" fontSize="13"/>
                
                <mx:Spacer width="50"/>
                
                <mx:Label text="{text2}" fontSize="13" fontWeight="bold" color="0x21911D"/>
                
            </mx:HBox>
            
            <mx:HBox width="100%" height="40">
                
                <mx:Button id="start_2" width="1" height="1" label="a" tabEnabled="true" tabIndex="10"/>
                
                <mx:TextInput id="comp_21" text="First" tabEnabled="true" tabIndex="11"
                              
                              keyDown="keydown11(event)" width="100" focusIn="{text2=comp_21.text}"/>
                
                <mx:Label text="->"/>
                
                <mx:Button id="comp_22" label="Second" tabEnabled="true" tabIndex="12"
                           
                           keyDown="keydown12(event)"  focusIn="{text2=comp_22.label}"/>
                
                <mx:Label text="->"/>
                
                <mx:Button id="comp_23" label="Third" tabEnabled="true" tabIndex="13"
                           
                           keyDown="keydown13(event)" focusIn="{text2=comp_23.label}"/>
                
                <mx:Label text="->"/>
                
                <mx:TextInput id="comp_24" text="Fouth" tabEnabled="true" tabIndex="14"
                              
                              keyDown="keydown14(event)" width="100" focusIn="{text2=comp_24.text}"/>
                
                <mx:Button id="end_2_1" width="1" height="1" label="b" tabEnabled="true" tabIndex="15"/>
                
            </mx:HBox>
            
            <mx:DataGrid id="dataGrid" keyDown="keydownDataGrid(event)"
                        
                         tabEnabled="true" tabIndex="16" focusIn="dataGridFocusIn(event)"
                        
                         dataProvider="{dp}"
                        
                         editable="true">
                
                <mx:columns>
                    
                    <mx:DataGridColumn dataField="@column1" width="100" editable="true" headerText="Col1"/>
                    
                    <mx:DataGridColumn dataField="@column2" headerText="Col2" width="180" editable="true" textAlign="right"/>
                    
                    <mx:DataGridColumn dataField="@column3" headerText="Col3" width="110" editable="true" textAlign="right"/>
                    
                    <mx:DataGridColumn dataField="@column4" headerText="Col4" width="110" editable="true" textAlign="right"/>      
                    
                </mx:columns>
                
            </mx:DataGrid>
            
            <mx:Button id="end_2_2" width="1" height="1" label="b" tabEnabled="true" tabIndex="17"/>  
            
        </mx:VBox>
        
        <mx:Text text="非循环切换比较简单，对于第一个和最后一个界面元素不需要进行特殊处理，这里就省略Demo" fontSize="12"/>
        
    </mx:Panel>       
</s:Application>



http://wmcai.blog.163.com/blog/static/480242008101224142851/

Ian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easyui datagrid实现实现上下左右和回车切换单元格
05-19
能够直接使用
flex datagrid 数据保存到excel以及从excel读取数据
07-13
在IT行业中，Flex Datagrid是一种常用的UI组件，用于展示和管理大量数据，它在Adobe Flex或ActionScript 3（AS3）开发环境中广泛使用。这个主题涉及到如何将Flex Datagrid中的数据保存到Excel文件，以及从Excel文件...
如何人为控制Flex Tab键顺序 （DataGrid）
bluelilyabc的专栏
01-22 1034
平常中更常见的是用Tab或者shift+Tab键。我们知道以前的桌面程序一般是指定控件的tabIndex就可以了。 在Felx中我们也可以这么做。我们知道每个Flex 控件基本都有2个属性tabIndex和tabEnabled. 默认情况下tabIndex == -1, tabEnabled == false; 只有是Button或者TextField类型为’input’时，默认为true
Flex中Enter键代替Tab键
zc529739024的博客
01-05 895
1.添加键盘监听事件，监听键盘按下charcode 2.charcode为13，下一个容器获得焦点 完整代码 http://www.adobe.com/2006/mxml"      initialize="init()">         privatefunction init():void    {     this.addEventListener(KeyboardE
easyUI跨Tab操作datagrid
weixin_34235371的博客
10-27 171
1、在datagrid那个页面定义方法 1 window.top["RELOAD_MY_DATAGRID"]=function(){ 2 $("#dg").datagrid("reload"); 3 }; 2、在easyUI主页定义方法 1 function reloadTabGrid(title) { 2 if ($("#workSp...
Flex4 DataGrid表格操作
钟离文修的博客
03-02 177
Flex4 DataGrid表格操作，表格回车事件默认是换行，这里修改为换单元格，单元格轮完换行。支持上下左右和回车键控制光标位置，还添加了"+","-"按钮，用于控制添加行和删除选中的行。 界面效果： 代码连接：https://download.csdn.net/download/qq_38173256/10989876 ...
flex xml 生成
05-20
7. **XML与Flex组件**：Flex提供了许多可以直接与XML数据绑定的组件，如DataGrid、List等。通过设置数据Provider，可以直接将XML数据展示在组件上，实现数据驱动的界面。 8. **XML Schema验证**：为了确保生成的XML...
Flex导出excel文件例子
10-29
这需要监听DataGrid的事件并设置所有数据项的选定状态。 ```actionscript dataGrid.selectAll(); ``` 7. **导出到文件**：最后，将工作簿保存为Excel文件。as3xls提供了writeToFile方法，可以将工作簿写入指定的...
Developing Flex Applications 910p dda_doc88_cracker.zip
08-04
1. a book Developing Flex Applications 2. a web page viewer for doc88 ebt 3. a DDA downloader for doc88.com CONTENTS PART I: Presenting Flex CHAPTER 1: Introducing Flex. . . . . . . . . . . . . . ...
WebUI4Angular:一组带有angularjs的组件，其中包括Datagrid，tree，dialog，progress，tilelist，tabset，dividedbox，imageview等
05-29
a set of components with angularjs, which includes Datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview and so on. 参照了UI Bootstrap等组件的写法，主要对指令进行了自己的封装，我们希望...
Flex中的editedItemPosition
前端开发、简约至上！ - Html，Css，Js，Jquery ...
08-30 209
最近想实现一个list双击编辑其项目的效果。查了一下帮助文档。看到一个createItemEditor() createItemEditor(): 使用由 itemEditor 属性指定的编辑器在 editedItemPosition 为项目渲染器创建项目编辑器。 此方法将编辑器实例设置为 itemEditorInstance 属性。 您只能从 itemEditBegin 事件的事件侦听器中...
C1.Win.C1FlexGrid控件使用
生活在继续
12-07 7150
1、数据源    grd.DataSource = o.tsd.Tables(0)             grd.Refresh() 2、禁止拖拽    grd.AllowDragging = C1.Win.C1FlexGrid.AllowDraggingEnum.None             grd.SelectionMode = C1.Win.C1FlexGrid.Classi
easyUI--datagrid 实现按键控制( enter tab 方向键 )
weixin_30902675的博客
03-10 424
1.表格定义时加上 onClickCell: onClickCell,2.定义列时加入编辑器3.引入 key.js 即可使用 enter 键 或者向下箭头 选中单元格下移 选中单元格上移 tab键 选中单元格右移 shirft+tab 选中单元格左移 最后一行另起一格 欢迎改进 var pfields =undefined; //属性集合 v...
flex Datagrid数据列双击事件实现
Z的博客
07-05 2396
最近做flex的项目遇到了一个问题：要实现双击DataGrid的一行数据，将该行数据赋值到打开的新窗口中。    在网上找了好久，发现要么答非所问，要么就是只言片语。所以我想通过CSDN这个平台把我的经验总结一下。先贴一下代码：                                                                                
flex4.5 DataGrid的GridItemEditor属性设置
yfisaboy的专栏
11-14 4082
在flex3里面，更改DataGrid的GridItemEditor非常方便，只需要设置itemEditor属性就可以了 比如要使用NumericStepper作为itemEditord  <mx:DataGridColumn headerText="Quantity" dataField="quantity" itemEditor="mx.controls.NumericSteppe
EasyUI_Datagrid编辑-键盘上下键选择行(一)
生面别开
07-23 2423
Datagrid行编辑， 通常我们是单击某一行进行编辑. 但是当我们在录入单据的时候，每次录入一行数据就要用鼠标去点击，就不方便了。 思路： 编辑的时候，使用jQuery为行里面的元素绑定一个keydown事件就好了。  一般都是textbox，或combobox，他们生成的html元素都是  只是渲染的不同 具体可以查看DOM元素 代码： 在onBe
flex datagrid加鼠标事件获取行和当前单元格的值
10-28 8776
首先datagrid加入鼠标单击事件： datagrid.addEventListener(MouseEvent.CLICK, GetPreviewInventoryDetail); 然后在函数GetPreviewInventoryDetail里可以获取单击当前单元格的行和值 private function GetPreviewInventoryDetail(evt:ListEvent
wpf datagrid enter键无法触发keydown
最新发布
11-22
在WPF中，DataGrid控件的Enter键默认是用来完成单元格编辑的，因此无法触发KeyDown事件。如果想要在按下Enter键时触发KeyDown事件，可以通过以下两种方法实现： 1.在DataGridTextColumn的EditingElementStyle中添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值