注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

LockableDataGrid可锁定列的DataGrid  

2009-01-11 22:41:03|  分类: Flex 组件 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

在DataGrid的实际使用过程中,有时候会需要将前面几列锁住,或者前几行锁住,就像Excel的表设计一样。在滚动条拖动的时候能始终保持前面锁定的列显示在界面中。

LockableDataGrid可锁定列的DataGrid - 阿蔡 - 古越之地

在flex的DataGrid设计中实际上已经考虑到了这个功能。属性lockedColumnCount和lockedRowCount就是实现这个功能的最快捷径。但是lockedColumnCount属性却不能解决始终保持某一列如Id保持在第一列,虽然我们可以设置Id列的draggable=false,但我们可以拖动后面的列到Id列的前面,从而打破这个规则,这是我们不愿看到的结果。

在这个例子中我们通过对DataGrid的扩展和重写,对DataGridColumn列的拖动后放下的函数处理进行一个限制判断,对于放下的索引号小于等于我们锁定列数,那么我们不让其交换列。原理就这么简单,但这里有一个问题就是函数的作用域问题。函数shiftColumns就是处理交换列的函数,改函数的作用域为mx_internal,因此这里做了一个对mx_internal引用的问题。

import mx.core.mx_internal;
use namespace mx_internal;

代码:

LockableDataGrid.as

package cwmlib

{

    import flash.events.Event;

   

    import mx.controls.DataGrid;

    import mx.controls.dataGridClasses.DataGridColumn;

    import mx.core.mx_internal;

    use namespace mx_internal;

 

    public class LockableDataGrid extends DataGrid

    {

       public function LockableDataGrid()

       {

           super();

       }

       /**

        * do not allow the locked column shift and other column can not shift before these columns

        */

       override mx_internal function shiftColumns(oldIndex:int, newIndex:int,

                                          trigger:Event = null):void

        {

            if(newIndex < this.lockedColumnCount){

            return;

            }

           super.shiftColumns(oldIndex,newIndex,trigger);

        }

      

        override protected function createChildren():void

        {

            super.createChildren();   

            for(var i:int = 0; i < this.columns.length; i ++){

               var c:DataGridColumn = this.columns[i] as DataGridColumn;

               if(i < this.lockedColumnCount){

                   c.draggable = false;

               }         

            }            

        }      

    }

}

//测试代码LockableDataGridApp.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"

    xmlns:cwmlib="cwmlib.*">

    <mx:Script>

       <![CDATA[

           [Bindable]

           private var dp:XMLList =

              <><item id='100' name='Name A' city='Shanghai' email='emailA@gmail.com' description='desc 1'/>

              <item id='101' name='Name B' city='Beijing' email='emailB@gmail.com' description='desc 2'/>

              <item id='102' name='Name C' city='Hangzhou' email='emailC@gmail.com' description='desc 3'/>

              <item id='103' name='Name D' city='Hongkong' email='emailD@gmail.com' description='desc 4'/>

              <item id='104' name='Name E' city='Boston' email='emailE@gmail.com' description='desc 5'/>

              <item id='105' name='Name F' city='Shenzhen' email='emailF@gmail.com' description='desc 6'/>

              <item id='106' name='Name G' city='Tianjin' email='emailG@gmail.com' description='desc 7'/>

              <item id='107' name='Name H' city='Chongqing' email='emailH@gmail.com' description='desc 8'/>

              <item id='108' name='Name I' city='New York' email='emailI@gmail.com' description='desc 9'/>

              </>;

       ]]>

    </mx:Script>

    <mx:Label text="Totally Locked Column, can not shift move the locked column"/>

    <cwmlib:LockableDataGrid width="500" lockedRowCount="1" lockedColumnCount="1" horizontalScrollPolicy="on" dataProvider="{dp}">

       <cwmlib:columns>

           <mx:DataGridColumn dataField="@id" headerText="Id" width="100"/>

           <mx:DataGridColumn dataField="@name" headerText="Name" width="100"/>

           <mx:DataGridColumn dataField="@city" headerText="City" width="200"/>

           <mx:DataGridColumn dataField="@email" headerText="Email" width="200"/>

           <mx:DataGridColumn dataField="@description" headerText="Description" width="300"/>       

       </cwmlib:columns>

    </cwmlib:LockableDataGrid>

    <mx:Label text="Flex Default Locked Column, can shift move the locked column"/>

    <mx:Label text="Even if set the locked column draggable=false, also can move other column to the first column"/>

    <mx:DataGrid width="500" lockedRowCount="1" lockedColumnCount="1" horizontalScrollPolicy="on" dataProvider="{dp}">

       <mx:columns>

           <mx:DataGridColumn dataField="@id" draggable="false" headerText="Id" width="100"/>

           <mx:DataGridColumn dataField="@name" headerText="Name" width="100"/>

           <mx:DataGridColumn dataField="@city" headerText="City" width="200"/>

           <mx:DataGridColumn dataField="@email" headerText="Email" width="200"/>

           <mx:DataGridColumn dataField="@description" headerText="Description" width="300"/>       

       </mx:columns>

    </mx:DataGrid>

</mx:Application>

 感谢Zhenglei对该DataGrid功能的扩展。

代码下载

Demo下载

 


 

  评论这张
 
阅读(2244)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017