`
linwei_211
  • 浏览: 191563 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

GRID拖拽行的例子

阅读更多
---------------------GRID拖拽行的例子  单行拖拽---------------------------------------
//创建第一个GRID
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDdGroup',//这里是第二个GRID的ddGroup
store       : firstGridStore,
enableDragDrop : true,//True表示启动对于GridPanel中选中行的拖动行为
……其他属性省略
});

//创建第二个GRID
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//这里是第一个GRID的ddGroup
store       : secondGridStore,
enableDragDrop : true,//True表示启动对于GridPanel中选中行的拖动行为
……其他属性省略
});

//创建第一个GRID的ddGroup
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup    : 'firstGridDdGroup',//和第二个GRID的ddGroup相同
copy        : true,
notifyDrop : function(ddSource, e, data){
   function addRow(record, index, allItems) {
    var foundItem = secondGridStore.find('name', record.data.name);
    if (foundItem == -1) {
     firstGridStore.add(record);
     firstGridStore.sort('name', 'ASC');
     ddSource.grid.store.remove(record);
    }
   }
   Ext.each(ddSource.dragData.selections ,addRow);
   return(true);
}
)};

//创建第二个GRID的ddGroup
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1];
var secondGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl,{
ddGroup : 'secondGridDdGroup',//和第一个GRID的ddGroup相同
copy        : true,
notifyDrop : function(ddSource, e, data){
   function addRow(record, index, allItems) {
    var foundItem = secondGridStore.find('name', record.data.name);
    if (foundItem == -1) {
     secondGridStore.add(record);
     secondGridStore.sort('name', 'ASC');
     ddSource.grid.store.remove(record);
    }
   }
   Ext.each(ddSource.dragData.selections ,addRow);
   return(true);
}
});
----------------------------------------------------------------------
分享到:
评论

相关推荐

    Ext.net实现GridPanel拖动行、上移下移排序功能DEMO

    对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...

    ExtJS5学习之Grid与Grid之间的数据拖拽

    在"ExtJS5学习之Grid与Grid之间的数据拖拽"这个主题中,我们将深入探讨如何实现这种交互功能,以及背后的机制和重要知识点。 首先,我们要了解ExtJS的Grid组件。Grid是一种可配置的表格视图,它可以显示大量的结构...

    C#实现Dev Grid拖拽移动行的方法

    总的来说,C#实现Dev Grid拖拽移动行的方法涉及了Windows Forms的拖放机制,结合Dev Express控件的特性,通过监听和响应各种事件,实现了行的动态移动,从而提供了用户友好的交互体验。这种方法对于需要用户自定义...

    bootstarp拖拽布局例子

    在实现拖拽布局时,我们可以借助于Bootstrap的栅格系统(Grid System)。栅格系统是基于行(row)和列(column)的结构,它允许开发者通过简单的HTML代码来创建复杂的响应式布局。 首先,你需要在HTML文档中引入...

    前端项目-react-grid-layout.zip

    而"react-grid-layout"则是一个专门针对React的网格布局组件,旨在提供一种灵活、可拖动且可调整大小的解决方案,尤其适用于创建响应式的网页应用。这个项目不仅支持用户通过鼠标或触摸设备动态调整元素的位置和大小...

    PropertyGrid属性控件

    在这个例子中,`MyClass`是一个包含属性的类,`MyProperty`是通过PropertyGrid显示和编辑的属性。`MainForm`中的构造函数初始化了PropertyGrid控件并设置了要显示的对象。`MyProperty`的`DisplayName`属性被设置为...

    jQuery Gridly 拖拽排序插件获得拖动的位置

    综上所述,jQuery Gridly 拖拽排序插件提供了强大的布局管理和拖放功能,其回调机制则为开发者提供了获取拖动位置信息的能力,进而实现各种定制化的交互体验。无论你是构建一个简单的卡片布局还是一个复杂的项目管理...

    两个给予jquery的拖拽布局的例子

    在例子"拖拽布局"中,开发者可能创建了一个基础的拖拽功能,允许用户通过鼠标拖动页面上的元素。`draggable()`方法接受一些参数,例如`containment`可以限制元素的拖动范围,`grid`可以让元素在特定的网格中移动,`...

    jquery实现拖拽

    这个例子中,我们设置了行(`tr`)为可拖动,并定义了tbody作为接受拖放的目标。当行被拖放到新的位置时,行的内容会在目标位置插入。 除了基础的拖拽功能,还可以通过插件如jQuery UI的Draggable和Droppable组件来...

    Ajax拖拽例子代码

    在这个"Ajax拖拽例子代码"中,我们可以看到如何利用jQuery库来实现类似Chinaren的拖拽界面效果。 首先,我们来看`index.html`,这是网页的主文件,通常包含HTML结构以及引入其他资源如CSS和JavaScript文件的链接。...

    [WPF] 使用Grid与GridSplitter排版布局

    在这个例子中,我们创建了两行两列的Grid,第一行和第一列的宽度和高度被设置为"Auto",这意味着它们将根据内容自动调整大小。第二行和第二列的宽度和高度被设置为"*",表示它们将占据剩余的空间。 接下来,我们...

    EXT 控件拖动例子

    在这个"EXT 控件拖动例子"中,我们将深入探讨EXTJS如何实现控件的拖放功能,以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口,它使得在界面上的元素可以被拖动和放置。这个接口...

    基于jQuery 开发的几个组件 (Table, Grid ,Menu ,Layout)

    jQuery UI的Grid(即jqGrid)是此类组件的一个例子。jqGrid提供了一套完整的API和事件,允许用户与数据进行交互,如编辑、添加、删除和搜索记录。要使用jqGrid,首先需要引入jQuery、jQuery UI核心和jqGrid库,然后...

    wpf 缩放加拖拽功能

    描述中的"wpf viewbox 拖拽 缩放例子做参考用"提示我们,我们将讨论一个具体的应用实例,展示如何结合ViewBox和用户交互操作(拖拽和缩放)来增强用户体验。 首先,让我们了解一下ViewBox的基本用法。在XAML中,你...

    EXTJS 3.3.1例子

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    TreeListControl拖动模板设计

    在这个例子中,通过调整DragElementTemplate,我们可以改变拖动时的图标和文本,从而更好地反映拖动项的状态。同时,通过结合其他特性如过滤和总计,可以构建出功能强大且用户友好的数据查看和管理界面。

    wpf控件拖动,控件换位置

    对于其他布局容器,如`Grid`或`StackPanel`,可能需要不同的方法来调整控件的位置。 最后,关于动画效果,WPF 提供了强大的动画系统,可以在拖动过程中平滑地改变控件的位置。例如,我们可以创建一个`...

    JQuery拖拽DIV

    - **设置拖动阻力**:使用`grid`选项可以设置每次拖动时元素移动的距离。 ```javascript $("#draggable").draggable({ grid: [50, 50] // 每次拖动至少移动50像素 }); ``` - **阻止默认行为**:在某些情况下,...

    js.rar_datagrid js_grid

    在这个特定的例子中,"datagrid"可能是一个自定义实现,由`grid.js`和`view.js`两个文件协同工作来构建。 `grid.js`很可能是核心的实现文件,它负责数据网格的主要逻辑,包括但不限于: 1. 数据绑定:将服务器端...

    用Dhtmlx做的例子

    这个库以其丰富的用户界面元素和功能而闻名,包括树形控件、数据网格、日历以及可编辑、可拖拽和可排序的表格。下面将详细讨论这些知识点。 1. **树形控件(Tree)**: 树形控件是DHTMLX的一个核心组件,它允许以...

Global site tag (gtag.js) - Google Analytics