表格之间的行拖动

转载 2007年09月21日 09:52:00
下面的例子使用DataGrid组件的dragEnabled, dropEnabled,和 dragMoveEnabled属性实现表格之间的行数据移动

全代码:

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/dragging-rows-between-two-different-flex-datagrid-controls/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="horizontal"
        verticalAlign
="middle"
        backgroundColor
="white">

    
<mx:Array id="arr">
        
<mx:Object colA="Item A.0" colB="Item B.0" colC="Item C.0" />
        
<mx:Object colA="Item A.1" colB="Item B.1" colC="Item C.1" />
        
<mx:Object colA="Item A.2" colB="Item B.2" colC="Item C.2" />
        
<mx:Object colA="Item A.3" colB="Item B.3" colC="Item C.3" />
        
<mx:Object colA="Item A.4" colB="Item B.4" colC="Item C.4" />
        
<mx:Object colA="Item A.5" colB="Item B.5" colC="Item C.5" />
        
<mx:Object colA="Item A.6" colB="Item B.6" colC="Item C.6" />
        
<mx:Object colA="Item A.7" colB="Item B.7" colC="Item C.7" />
        
<mx:Object colA="Item A.8" colB="Item B.8" colC="Item C.8" />
        
<mx:Object colA="Item A.9" colB="Item B.9" colC="Item C.9" />
    
</mx:Array>

    
<mx:ApplicationControlBar dock="true">
        
<mx:Form>
            
<mx:FormItem label="DataGrid #1:"
                    direction
="horizontal">
                
<mx:CheckBox id="dg1_dragEnabled"
                        label
="dragEnabled" />
                
<mx:CheckBox id="dg1_dropEnabled"
                        label
="dropEnabled" />
                
<mx:CheckBox id="dg1_dragMoveEnabled"
                        label
="dragMoveEnabled" />
            
</mx:FormItem>
            
<mx:FormItem label="DataGrid #2:"
                    direction
="horizontal">
                
<mx:CheckBox id="dg2_dragEnabled"
                        label
="dragEnabled" />
                
<mx:CheckBox id="dg2_dropEnabled"
                        label
="dropEnabled" />
                
<mx:CheckBox id="dg2_dragMoveEnabled"
                        label
="dragMoveEnabled" />
            
</mx:FormItem>
        
</mx:Form>
    
</mx:ApplicationControlBar>

    
<mx:VBox width="50%">
        
<mx:Label text="DataGrid #1" />
        
<mx:DataGrid id="dataGrid1"
                width
="100%"
                rowHeight
="22"
                dataProvider
="{arr}"
                dragEnabled
="{dg1_dragEnabled.selected}"
                dragMoveEnabled
="{dg1_dragMoveEnabled.selected}"
                dropEnabled
="{dg1_dropEnabled.selected}"
                verticalScrollPolicy
="on">
            
<mx:columns>
                
<mx:DataGridColumn dataField="colA"
                        headerText
="Column A" />
                
<mx:DataGridColumn dataField="colB"
                        headerText
="Column B" />
                
<mx:DataGridColumn dataField="colC"
                        headerText
="Column C" />
            
</mx:columns>
        
</mx:DataGrid>
        
<mx:Label text="{dataGrid1.dataProvider.length} items" />
    
</mx:VBox>

    
<mx:VBox width="50%">
        
<mx:Label text="DataGrid #2" />
        
<mx:DataGrid id="dataGrid2"
                width
="100%"
                rowHeight
="22"
                dataProvider
="[]"
                dragEnabled
="{dg2_dragEnabled.selected}"
                dragMoveEnabled
="{dg2_dragMoveEnabled.selected}"
                dropEnabled
="{dg2_dropEnabled.selected}"
                verticalScrollPolicy
="on">
            
<mx:columns>
                
<mx:DataGridColumn dataField="colA"
                        headerText
="Column A" />
                
<mx:DataGridColumn dataField="colB"
                        headerText
="Column B" />
                
<mx:DataGridColumn dataField="colC"
                        headerText
="Column C" />
            
</mx:columns>
        
</mx:DataGrid>
        
<mx:Label text="{dataGrid2.dataProvider.length} items" />
    
</mx:VBox>

</mx:Application>

 

 

 

相关文章推荐

项目实践——利用标记避免表格行之间出现被重复赋值,同时避免去除自身

问题背景 点击表格中的多行,通过填写表单号,来进行后续的操作。。。 在我们填写表单号时,如何才能避免填入的表单号重复呢? 还有一个问题,在去除重复时,我们必须判断比较重复的行不是...

动态添加删除表格行,以及计算列之间的乘积

function findObj(theObj, theDoc) { var p, i, foundObj; if (!theDoc) theDoc = doc...

bootstrap-table实现两个表格之间数据的传递,表格添加行删除行功能

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等。 具体的帮助可以到如下链接看...
  • hack8
  • hack8
  • 2015年10月09日 18:13
  • 18672

VBA编程,工作薄打开,两个工作薄之间表格复制,Range的copy方法

在VBA中 ,ThisWorkbook和ActiveWorkbook区别,ThisWorkbook值得是代码所在的工作簙,而ActiveWorkbook是目前程序代码运行到的激活的工作簙。例如我在用V...

jq实现表格之间的删除移动

公司的项目要求给后台系统添加一下功能,将公司的成员选择并移动到其他部门,想了挺久做了一个demo出来,其中涉及全选和remove;代码如下;项目引用了jq ...

mysql数据库的备份以及表格数据之间的复制

#####-------------mysql数据备份以及表间数据的复制-------------------##### ##----------------我的mysql学习(二)--------...

采用hash_map进行表格之间数据的查找

http://www.it165.net/pro/html/201504/39277.html http://www.2cto.com/kf/201304/199523.html http://www...
  • ljp1919
  • ljp1919
  • 2015年09月26日 15:00
  • 802

表格中单元格之间分隔线的隐藏方法

表格中单元格之间分隔线的隐藏方法 第 一 行 第 二 行 第 三 行 这个表格去掉了单元格之间的纵向分隔线 ...

Html中表格行的拖动

表格行拖动 window.onload = function(){ //绑定事件 var addEvent = document.addE...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格之间的行拖动
举报原因:
原因补充:

(最多只允许输入30个字)