Flex动态生成可编辑的DataGrid具体实现代码

一:先说说我写这个DataGrid具有的功能
1、表头是动态生成的。
2、每行都是有序号的。
3、每行都是可以编辑、插入、删除、修改的。
4、每个单元格都是加验证的。
5、单元格有些是经过渲染生成的比如:Combobox,DateField...

二、说一些实现这些功能的困难
写这个的时候感觉都是困难不知道,走过来了也就木有神马啦,最让我费劲的就是渲染例如:Combobox在渲染的时候不能用ItemRenderer因为他不能绑定值,只能用ItemEditor但是怎样获得这个一个经过渲染的对象,通过百度不断地百度,终于发现了ClassFactory这个工厂可以生产各种想要的组件。各种困难现在都记不起来了,三天时间终于完成啦。为什吗要这样写呢?因为要做数据更新系统,每年数据都会有变化,这样页面也需要变化,总不能每年都去改源码吧,不如想个法子全给他整成动态的。这就是写这个的初衷。

三、关键源码


代码如下:

package datagridview
{
import com.adobe.serialization.json.JSON;
import com.jzh.test.ComboxColumn;
import com.jzh.test.ComboxItem;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.ComboBase;
import mx.controls.ComboBox;
import mx.controls.DateField;
import mx.controls.RadioButtonGroup;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
import mx.core.ClassFactory;
import mx.validators.RegExpValidator;
import spark.components.DropDownList;
public class RendererUtil
{
public function RendererUtil()
{
}
public static function getButtonRenderer():ClassFactory{
var f:ClassFactory=new ClassFactory(OperateButtons);
f.properties={};
return f;
}
public static function getNumRenderer():ClassFactory{
var f:ClassFactory=new ClassFactory(numLabel);
f.properties={};
return f;
}
public static function getComboxRenderer(arr:ArrayCollection,label:String):ClassFactory{
//应该在这里查询数据库
var f:ClassFactory=new ClassFactory(ComboBox);
f.properties={dataProvider: arr,labelField:label,selectedIndex:'0',selectedItem:'石质路面'};//添加属性,绑定选择状态
return f;
}
public static function getRadioRenderer(label:String):ClassFactory{
var f:ClassFactory=new ClassFactory(ComboBox);
var arr:ArrayCollection=new ArrayCollection();
arr.addItem("是");
arr.addItem("否");
f.properties={dataProvider: arr,labelField:label,selectedIndex:'0',selectedItem:'否'};//添加属性,绑定选择状态
return f;
}
public static function getDateRenderer():ClassFactory{
var f:ClassFactory=new ClassFactory(DateField);
f.properties={formatString:"YYYY-MM-DD",showToday:true};//添加属性,绑定选择状态
return f;
}
/*本来想在这渲染生成验证器的,无奈技术在达不到*/
public static function getValidateRenderer():ClassFactory{
var f:ClassFactory=new ClassFactory(RegExpValidator);
f.properties={ source:"roadcode",
property:"text" ,
expression:"^[0-9]*$",
noMatchError:"填写验证不通过时显示他提示信息" };//添加属性,绑定选择状态
return f;
}
/*测试用*/
public static function getRenderer(label:String,callback:Function=null):ClassFactory{
var f:ClassFactory=new ClassFactory(numLabel);
f.properties={lab:label,callback:callback};
return f;
}
}
}

以上代码是渲染器部分。

(0)

相关推荐

  • Flex3 DataGrid拖拽到ClumnChart动态显示图表实现代码

    支持多行同时拖拽,重复数据不重得添加,添加了图表右键菜单. 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Scr

  • Flex DataGrid DataGridColumn数据颜色多样化-类型替换

    比如 0--关闭(red),1--开启(green), 就这两个比较简单的代表.在读出数据的时候,需要按照上面的标注来显示其字体的颜色,这个时候,有好几种处理方法,不过目的只有一种.就是为了得到颜色字体. 这里就直接给出程序吧,其实很简单.还有另外的两三种方法吧,呵呵,其实由于用法相当多,它的设置参数也十分的多,根据需要可以设置出不同的效果出来.希望对大家有帮助. 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?

  • Flex中让鼠标移至AdvancedDataGrid的行上不自动修改显示效果

    注意:事实上发现,mx:Repeater控件在数据大的时候性能很差. 但是当换成AdvancedDataGrid发现,鼠标在Grid上移动Flex自动为焦点所在行修改css,为屏蔽该效果,自定义如下控件: ApmAdvancedDataGrid.as 复制代码 代码如下: package com.nauproject.apm.common.custom {     import flash.events.MouseEvent; import mx.controls.AdvancedDataGri

  • Flex动态生成可编辑的DataGrid具体实现代码

    一:先说说我写这个DataGrid具有的功能 1.表头是动态生成的. 2.每行都是有序号的. 3.每行都是可以编辑.插入.删除.修改的. 4.每个单元格都是加验证的. 5.单元格有些是经过渲染生成的比如:Combobox,DateField... 二.说一些实现这些功能的困难 写这个的时候感觉都是困难不知道,走过来了也就木有神马啦,最让我费劲的就是渲染例如:Combobox在渲染的时候不能用ItemRenderer因为他不能绑定值,只能用ItemEditor但是怎样获得这个一个经过渲染的对象,通

  • layui的布局和表格的渲染以及动态生成表格的方法

    整体的效果: 一.首先百度搜索layui的地址,然后下载layui的压缩包,,将压缩包的文件解压缩,然后将解压缩后的文件复制到你的编译器上: 二.建立一个html文件,引入layui.css 和 layui.js两个文件,一定要将地址写对,css和js要一起引用: 三.将整个页面分为三部分body标签中要引用的class为class="layui-layout-body" 3.1.头部部分:用一个大的div包裹,class="layui-layout layui-layout

  • 如何使用Jquery动态生成二级选项列表

    这篇文章主要介绍了如何使用Jquery动态生成二级选项列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 想写一个多级联动的选项列表,并且我想要动态生成,但是我看了好多博客看得我晕乎乎的,就自己查了一些jq 的方法自己尝试些了一下,下面放上我实现的效果和源代码 实现效果: 源代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

  • Flex中如何动态生成DataGrid以及动态生成表头

    在Flex中动态生成表格,并且表格的表头也是动态生成 1.源码 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initHandler()" width

  • flex编程动态生成图像

    要动态生成图像必需先把记录转为图像处理所需的格式,以下是处理类 复制代码 代码如下: package emtit.utils { import mx.charts.CategoryAxis; import mx.charts.series.ColumnSeries; import mx.charts.series.PieSeries; import mx.collections.ArrayCollection; /** * author:黄建文 * data:2008-12-03 * 图形数据转

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • jQuery操作动态生成的内容的方法

    本文实例讲述了jQuery操作动态生成的内容的方法.分享给大家供大家参考,具体如下: 由于jQuery是页面一加载获取页面元素的,后期动态生成的元素,通过$("#xxxx")获取不到,需要用原始的js语句来获取: document.getElementById("xxx").value 对于动态生成的元素,bind绑定的事件 也无法触发,需要通过jQuery提供的另外一个方法 .live() 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()

  • jQuery EasyUI中DataGird动态生成列的方法

    EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法. DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定. <table id="dg"></table> <script>

  • C#实现动态生成静态页面的类详解

    本文实例讲述了C#实现动态生成静态页面的类.分享给大家供大家参考,具体如下: 动态生成静态页面有许多好处,比如生成html网页有利于被搜索引擎收录.同时,由于减少了数据访问,减轻对数据库访问的压力,提高了网页打开速度. 基本思路: 使用一个字符串作为页面模板,再页面中包含用若干标志(用 {标志名} 表示),生成页面时,将标志替换为对应的值. 实现方法: 在初始化TextTemplate实例时读入模板,以标志为分割点将模板分割成几部分,生成页面时只需简单的将模板内容和标志的值连接起来.例如: 假如

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

随机推荐