表格之间的行拖动

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

 

 

 

JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行。博主用了半天时间研究了下,效果是出来了,但是感觉不...
  • doc_wei
  • doc_wei
  • 2016年12月22日 15:27
  • 871

JS组件系列——Bootstrap Table 表格行拖拽

一、业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table...
  • liaozhongping
  • liaozhongping
  • 2015年10月31日 12:21
  • 2792

原生JS表格行拖动排序,添加了回调功能

function tableDnD(el, callback) { if (typeof (el) == "string") { el = document.getElemen...
  • apollokk
  • apollokk
  • 2015年11月14日 14:07
  • 1463

Jquery打造可以上下移动行的表格

current.insertBefore(prev); current.insertAfter(next);   表格 .editText { b...
  • cbjcry
  • cbjcry
  • 2017年04月13日 10:37
  • 389

js表格行拖动

表格行拖动               window.onload = function(){         //绑定事件         var addEvent = document....
  • wys3688
  • wys3688
  • 2014年05月22日 13:26
  • 612

jquery.tablednd_0_5.js 实现表格(table)行级拖拽

最近要实现一个行级别的排序功能,我采用的是jquery的一个插件jquery.tablednd_0_5.js 来实现的,大体如下配置; 这个不用说 肯定是必须的, 接下来构建自...
  • liruichuan
  • liruichuan
  • 2015年04月21日 19:13
  • 2883

Sigma Grid表格控件使用教程及下载

Sigma Grid最好用的表格控件 Sigma Grid 是一个基于 Ajax 的数据表格,用以显示滚动的表格以及进行单元格数据的在线编辑,支持各种流行的浏览器,提供服务器端的集成解决方案,包括 ...
  • kongjianxuanxing
  • kongjianxuanxing
  • 2014年05月05日 13:21
  • 1398

js实现表格列的位置拖拽

转载请注明出处:http://blog.csdn.net/sllailcp/article 公司突然出了新需求,拖拽表格的列到指定的列,去网上找了下,没有合适产品需求的,就自己写了个小功能。 具...
  • l284969634
  • l284969634
  • 2016年10月09日 13:32
  • 1372

CListContainerElementUI 表头拖拽不起作用

对于CListContainerElementUI 表头拖拽不起作用的问题,我也转载过一篇文章,用了他的东西没起作用,主要因为他没有深入的解析,自己研究了一番,终于解决了问题!         关于...
  • lixiang987654321
  • lixiang987654321
  • 2016年08月05日 13:22
  • 718

treegrid控件应用(拖拽)

一、数据 看到这样的前端控件,我最先关心的是数据是如何存储的。这里以json为例,贴一个来自官网的样例json文件: 第一类: [{ "id":1, "name":"C", "size":...
  • lipromising
  • lipromising
  • 2015年11月03日 17:48
  • 415
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:表格之间的行拖动
举报原因:
原因补充:

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