`

多种DataGrid ItemRender实现

阅读更多

      在Flex开发中,可能在展示数据方面,DataGrid是用得最多的组件。在默认情况下,DataGrid的单元格是String类型的数据,但是有时候我们为了满足一些特殊的开发需求,需要自定义特殊的DataGrid Itemrender。下面几种常见的ItemRender实现:

  

    1.CheckBoxr渲染:

final public class CheckBoxItemDataRenderer extends CheckBox
	{
		public function CheckBoxItemDataRenderer()
		{
			super();
			
			this.addEventListener(Event.CHANGE, changeHandler);
		}
		
		override public function set data(value:Object):void
		{
			super.data = value;
			this.selected = listData.label == 'true';
		}
		
		protected function changeHandler(event : Event) : void
		{
			data.@selected = this.selected;
		}
		
	}

  

  2.ColorPicker渲染:

final public class ColorItemRender extends ColorPicker implements IVariousDataGridItem
	{
		public function ColorItemRender()
		{
			super();
			
			this.width = 22;
			this.height = 22;
			
			this.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
		}
		
		private var _itemData : Object;
		
		private function valueCommitHandler(event : FlexEvent) : void
		{
			if(_itemData)
			_itemData.pvalue = super.selectedColor;
		}
		
		public function set data(value : Object):void
		{
			
			_itemData = value;
			super.selectedColor = Number(value.pvalue);
		}
		
		private function rgbToHex(color:uint):String
		{
			// Find hex number in the RGB offset
			var colorInHex:String = color.toString(16);
			var c:String = "00000" + colorInHex;
			var e:int = c.length;
			c = "0x" + c.substring(e - 6, e);
			
			return c.toUpperCase();
		}
		
		
	}

  

 

    3.Hsilder渲染:

final public class HSliderItemRender extends HSlider implements IVariousDataGridItem
	{
		public function HSliderItemRender(min:Number,max:Number,interval:Number,lbls:Array)
		{
			super();
			this.minimum=min;
			this.maximum=max;
			this.tickInterval=interval;
			this.snapInterval=1;
            this.labels=lbls;
			this.width = 150;
			this.height = 22;
			
			this.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
		}
		
		private var _itemData : Object;
		public function get text() : String{return String(super.value);}
		public function set text(avalue : String) : void{super.value=Number(avalue);}
		private function valueCommitHandler(event : FlexEvent) : void
		{
			if(_itemData)
			_itemData.pvalue = super.value
		}
		
		public function set data(value : Object):void
		{
			
			_itemData = value;
			super.value = Number(_itemData.pvalue);
		}
		
	}

 

 

    4.TextInput渲染:

 

final 	public class StringItemRender extends TextInput implements IVariousDataGridItem
	{
		public function StringItemRender()
		{
			super();
			
			this.width = 80;
			this.height = 25;
			
			this.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
		}
		
		private var _itemData : Object;
		
		private function valueCommitHandler(event : FlexEvent) : void
		{
			if(_itemData)
			_itemData.pvalue = super.text;
		}
		
		override public function set data(value : Object):void
		{
			super.data = value;
			
			this.text = value.pvalue;
			_itemData = value;
		}
		
	}

  

 

    5.CheckBox渲染:

final public class EnumItemRender extends ComboBox implements IVariousDataGridItem
	{

		private var enumString:String="";
		public function EnumItemRender(aEnumString:String="")
		{
			super();
			this.width = 80;
			this.height = 25;
			this.enumString=aEnumString;
			this.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
		}
		
		private var _itemData : Object;
		
		private function valueCommitHandler(event : FlexEvent) : void
		{
			if(_itemData)
			_itemData.pvalue = super.selectedItem;
		}
		
		override public function set data(value : Object):void
		{
			_itemData = value;

			super.data = _itemData;
			super.dataProvider = enumString.split("|");
			super.selectedItem = _itemData.pvalue;
			
		}
	}

 

  6.需要实现的接口:

public interface IVariousDataGridItem extends IUIComponent
	{
		function get text() : String;
		function set text(value : String) : void;
		
		function set data(value : Object) : void;
	}

  

   

PS:其实DataGrid的ItmerRender实现大同小异,只要是继承自不同的组件,然后override data的Set函数。

分享到:
评论
4 楼 wuleixushi 2010-02-22  
很好用  lz辛苦了
3 楼 wsy_123 2010-01-12  
我想问你一下能写一个例子,说明怎么应用好吗
2 楼 wuzhou 2010-01-05  
正好需要这个,学习了,谢谢了
1 楼 ahuango 2009-12-29  
能够附效果图讲解就好了

相关推荐

    Flex 自定义Datagrid的ItemRender

    本文将深入探讨如何在Flex中自定义Datagrid的ItemRender,以实现按钮、单选、复选和日期等控件的集成。 首先,我们需要了解ItemRender的基本概念。ItemRenderer是Flex提供的一种机制,允许开发者为数据网格中的每一...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid实现实现上下左右和回车切换单元格

    根据提供的文件信息,本文将详细解释如何在EasyUI DataGrid中实现上下左右及回车键切换单元格的功能。EasyUI 是一个基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 组件来帮助开发者快速构建现代化的 Web 应用...

    WPF DataGrid 拖拽实现

    本文将深入探讨如何在WPF的DataGrid中实现拖放功能。 首先,我们需要了解WPF中的拖放操作涉及到的主要类和事件。`DragDrop`是WPF提供的一个静态类,它提供了处理拖放操作的方法和事件。主要涉及的事件有`DragEnter`...

    wpf datagrid实现树结构.rar

    本项目“wpf datagrid实现树结构”就是针对这种需求的一个实例,它展示了如何在WPF的DataGrid中实现树状的数据展示。 首先,我们来理解一下核心概念。WPF的DataGrid控件默认并不支持树形结构,但可以通过自定义模板...

    DataGrid简单实现合并单元格

    标题提到的“DataGrid简单实现合并单元格”,实际上是指在不真正合并单元格的情况下,通过自定义头模板和单元格模板来模拟单元格合并的效果。下面,我们将深入探讨如何实现这一功能。 首先,理解DataGrid的基本结构...

    VC使用ADO Data和DataGrid控件实现遍历、修改、删除、添加.rar

    下面我们将逐一探讨如何使用ADO和DataGrid控件实现数据库的基本操作: 1. **遍历数据**:通过创建ADO的Connection对象,连接到数据库。然后,使用Command对象执行SQL查询语句,如"SELECT * FROM TableName",创建...

    WPF中DataGrid自定义实现最后一行下面跟一个汇总行,类似MT4

    本话题主要探讨如何在DataGrid中自定义实现最后一行后面添加一个汇总行,这在金融软件如MT4(MetaTrader 4)中非常常见,用于显示数据的总计或平均值等统计信息。 首先,我们需要了解DataGrid的基本用法。DataGrid...

    Flex Datagrid checkbox实现

    Flex Datagrid 是Adobe Flex框架中用于展示数据集的组件,它允许开发者以表格形式展示数据,并提供多种交互功能。在Flex应用中,Datagrid经常被用于处理和展示大量的结构化数据。在标题“Flex Datagrid checkbox实现...

    Easyui Datagrid 实现行过滤[模糊查询]

    首先,`EasyUI Datagrid` 是一个强大的表格控件,它允许开发者轻松地展示和操作数据,支持分页、排序、筛选等多种功能。在实际项目中,我们经常需要根据用户输入的关键字对数据进行实时过滤,这就是所谓的“行过滤”...

    flex datagrid中实现显示序列号

    在本篇文章中,我们将深入探讨如何在Flex DataGrid中利用`itemRender`来实现序列号的显示。 首先,了解`itemRenderer`的基本概念。`itemRenderer`是一个UIComponent子类的实例,它负责将数据对象转换为可视化的组件...

    C# WPF DataGrid控件实现三级联动

    本教程将详细讲解如何利用DataGrid实现三级联动的效果,即在一个DataGrid中更改某一项时,关联的其他两个DataGrid会根据选择自动更新其显示内容。 首先,理解“三级联动”的概念。在UI设计中,联动通常指的是一个...

    wpf实现DataGrid列表控件实现树形结构,并且展开控件ToggleButton可以放在任意一列,也可以冻住多列不可拖动

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)环境中使用DataGrid控件实现树形结构,并且能够将展开控件(如ToggleButton)放置在任意列,同时支持多列冻结不可拖动。这对于创建复杂的用户...

    WPF中DataGrid里面的Checkbox实现单选

    WPF中DataGrid里面的Checkbox实现单选关键代码, 文档里面的代码复制粘贴即可实现!本人也是项目需要写的一个功能11行代码实现此功能! 希望可以帮助到你们!

    DataGrid实现tooltip功能

    ### DataGrid实现tooltip功能 #### 一、简介 在Web开发中,为了提供更好的用户体验,开发者经常需要在用户界面中加入提示信息。其中,`tooltip`(工具提示)是一种非常实用的功能,它可以在用户鼠标悬停在某个元素...

    多种条件查询,Adodc1,DataGrid1的应用(VB6.0源代码编写

    在VB6.0编程环境中,"多种条件查询,Adodc1,DataGrid1的应用"是一个常见的主题,涉及数据库操作和用户界面展示。这个主题涵盖了如何利用ActiveX Data Objects (ADO)组件ADODC和DataGrid控件实现复杂的查询功能,并在...

    wpf通过datagrid操作数据库,实现datagrid增删改操作。

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)环境中使用DataGrid控件来操作数据库,实现数据的添加、删除和修改功能。DataGrid是WPF中的一个强大控件,它允许用户以表格的形式展示和编辑...

    wpf DataGrid 实现单击单元格进入编辑状态

    在Windows Presentation Foundation (WPF) 中,DataGrid控件是一个非常强大的数据展示和编辑工具,它允许用户以表格形式查看和操作数据。本教程将详细解释如何实现通过单击单元格来进入编辑状态,特别是在...

    WPF DataGrid合并单元格(模板列嵌套DataGrid)

    本教程将详细讲解如何在DataGrid中实现单元格的合并,以及如何在模板列中嵌套另一个DataGrid,尽管这种“合并”并非传统意义上的单元格合并,而是通过自定义布局来达到类似的效果。 首先,我们要明白,WPF DataGrid...

    在DataGrid中使用CheckBox,实现全选功能

    这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们需要在DataGrid的列定义中添加一个CheckBox列。在WPF中,可以使用DataGridTemplateColumn来自定义列模板,将CheckBox...

Global site tag (gtag.js) - Google Analytics