转自http://blog.chinaunix.net/u/21684/showart_971710.html
Alex’s Flex Closet中实现用双击的方法来修改datagrid中的item。因为在datagrid默认的修改的是单击动作。
代码如下:
package
{
import flash.events.MouseEvent;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EventPriority;
import mx.events.DataGridEvent;
/**
* DataGrid that only allows editing if you double click
*/
public class DoubleClickDataGrid extends DataGrid
{
public function DoubleClickDataGrid()
{
super();
doubleClickEnabled = true;
}
override protected function mouseDoubleClickHandler(event:MouseEvent):void
{
var dataGridEvent:DataGridEvent;
var r:IListItemRenderer;
var dgColumn:DataGridColumn;
r = mouseEventToItemRenderer(event);
if (r && r != itemEditorInstance)
{
var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
if (columns[dilr.listData.columnIndex].editable)
{
dgColumn = columns[dilr.listData.columnIndex];
dataGridEvent = new DataGridEvent(DataGridEvent.ITEM_EDIT_BEGINNING, false, true);
// ITEM_EDIT events are cancelable
dataGridEvent.columnIndex = dilr.listData.columnIndex;
dataGridEvent.dataField = dgColumn.dataField;
dataGridEvent.rowIndex = dilr.listData.rowIndex + verticalScrollPosition;
dataGridEvent.itemRenderer = r;
dispatchEvent(dataGridEvent);
}
}
super.mouseDoubleClickHandler(event);
}
override protected function mouseUpHandler(event:MouseEvent):void
{
var r:IListItemRenderer;
var dgColumn:DataGridColumn;
r = mouseEventToItemRenderer(event);
if (r)
{
var dilr:IDropInListItemRenderer = IDropInListItemRenderer(r);
if (columns[dilr.listData.columnIndex].editable)
{
dgColumn = columns[dilr.listData.columnIndex];
dgColumn.editable = false;
}
}
super.mouseUpHandler(event);
if (dgColumn)
dgColumn.editable = true;
}
}
}
主程序:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" xmlns:local="*" height="500" >
<mx:Script>
<![CDATA[
private var arr:Array = [
{ firstName: "Alex", lastName: "Harui" },
{ firstName: "Gordon", lastName: "Smith" },
{ firstName: "Deepa", lastName: "Subramanian" },
{ firstName: "Matt", lastName: "Chotin" },
{ firstName: "Ely", lastName: "Greenfield" },
{ firstName: "Kevin", lastName: "Lynch" },
{ firstName: "Shantanu", lastName: "Narayan" },
{ firstName: "Joan", lastName: "Lafferty" },
{ firstName: "Ryan", lastName: "Frishberg" },
{ firstName: "Jason", lastName: "Szeto" },
{ firstName: "Mark", lastName: "Anders" },
{ firstName: "Peter", lastName: "Flynn" },
{ firstName: "Heidi", lastName: "Williams" }
];
]]>
</mx:Script>
<local:DoubleClickDataGrid id="dg" initialize="dg.dataProvider=arr" editable="true">
<local:columns>
<mx:DataGridColumn dataField="firstName" headerText="First Name" />
<mx:DataGridColumn dataField="lastName" headerText="Last Name" />
</local:columns>
</local:DoubleClickDataGrid>
</mx:Application>
分享到:
相关推荐
jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip jeasyui-datagrid-datagrid2.zip
在Flex中,DataGrid通常与ArrayCollection或XMLListCollection等数据源绑定,以便动态加载和显示数据。开发者可以通过定义columns属性来自定义列头,通过itemRenderer属性来定制单元格的显示样式。 然而,当数据...
在Web应用开发中,数据展示和交互是核心部分之一,而DataGrid作为数据展示的利器,深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件,它为开发者提供了丰富的功能,如数据分页、排序、过滤等,极大地...
在"EasyUI-CRUD-DataGrid"这个主题中,我们将深入探讨如何使用 EasyUI 的 DataGrid 实现CRUD(Create、Read、Update、Delete)操作。CRUD是数据库管理的基本操作,对于任何数据驱动的应用程序来说都是至关重要的。 ...
4. **样式与主题**: `datagrid` 遵循 jQuery EasyUI 的样式规则,可以通过更改主题来改变其外观。 5. **事件处理**: `datagrid` 提供了一系列的事件,如 `onLoadSuccess`(数据加载成功)、`onClickRow`(点击行)...
easyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrideasyui--5.DataGrid
在IT行业中,datagrid是一种常用的组件,它用于展示和管理大量结构化的数据,通常在Web应用中使用。在本例中,我们关注的是一个名为"datagrid-dnd"的特性,这是一项允许用户通过拖放操作来重新排列数据网格行的功能...
总的来说,"Laravel开发-laravel-datagrid-builder"项目提供了一种高效且易于维护的方式来在Laravel应用中实现数据网格功能,结合Bootgrid,你可以快速创建出美观且功能强大的数据展示界面。通过熟悉其工作原理和...
为了实现鼠标双击编辑,我们需要监听GridEvent.DOUBLE_CLICK事件,并在事件触发时开启相应的单元格或行的编辑模式。这可能涉及到设置GridItemEditor和GridEditorFactory,以便在需要时显示合适的编辑器。 3. 插入复...
在本演示中,你将看到如何实现DataGrid的分页功能,这可能涉及到设置每页显示的记录数、计算总页数以及在用户切换页面时动态加载对应数据的技术。 此外,源码中可能还涵盖了事件处理机制,例如,当用户点击“新增”...
在Flex开发中,数据网格...总结,这个Flex3示例展示了如何在DataGrid中嵌套复选框并实现全选功能,这对于构建交互式的数据管理界面至关重要。通过学习和实践,开发者可以创建更灵活、用户友好的数据操作界面。
在Flex Datagrid中实现复选框功能,主要是通过添加一个自定义的列renderer来完成。Renderer是Datagrid中的一个小部件,负责渲染每一行或每一列的数据。对于复选框,我们可以创建一个CheckBox类的实例,然后将其设置...
`datagrid-filter.js`是插件的主要JavaScript文件,其中包含了实现过滤功能的逻辑代码。开发者可以在这个文件中找到设置过滤条件、更新过滤状态以及处理用户交互的函数。例如,可能会有如`applyFilter`、`...
下面将详细介绍如何在Flex中实现带复选框的Datagrid以及相关的知识点: 1. **Flex Datagrid组件**:Datagrid是Flex中的一个核心组件,它允许开发者展示和操作结构化的数据。你可以通过数据提供者(DataProvider)来...
本篇文章将深入探讨如何在Flex中创建一个既可编辑又具有分页功能的DataGrid。 首先,我们需要导入必要的库和类。在Flex项目中,`mx.controls.DataGrid` 是核心的DataGrid类,而`mx.controls.PagingControl` 和 `mx....
- Flex中的 **Splitter** 组件可以帮助创建可拖动的分割线,从而实现动态调整界面布局的功能。 - 使用示例: ```xml ``` #### 7. Panel组件 - **Panel** 是一个带标题栏的容器组件,通常用于组织多个UI元素。 -...