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

一：先说说我写这个DataGrid具有的功能

这个DataGrid的设计，核心思路就是动态化。具体来说，它具备以下几个关键能力：

• 表头是动态生成的，不需要硬编码。
• 每一行都有自动编号，方便查看。
• 每一行都支持编辑、插入、删除、修改操作。
• 每个单元格都带有验证逻辑，确保数据规范。
• 部分单元格经过渲染器处理，比如下拉框（ComboBox）、日期选择器（DateField）等。

二、说一些实现这些功能的困难

写这个组件的时候，坦白讲，每一步都是挑战。但回过头来看，其实也没有想象中那么难。最让人头疼的是渲染器部分——比如ComboBox这种组件，不能用ItemRenderer，因为它没法绑定值；只能走ItemEditor的路子。但问题来了：怎么才能拿到一个已经渲染好的对象呢？

经过反复搜索，终于找到了ClassFactory这个工厂类。它就像个万能模具，想要什么组件，直接“生产”出来就行。很多困难当时觉得无解，但咬咬牙也就过去了。从开始到最终完成，大概花了三天时间。

为什么非要这么折腾？因为这套系统要处理每年都会变化的数据更新任务。如果每年都去改源码，那维护成本就太高了。不如一次性把整个DataGrid做成动态的，用配置驱动，一劳永逸。这就是当初写这个组件的初衷。

三、关键源码

复制代码

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;
        }
    }
}

以上代码是渲染器部分，核心就是利用ClassFactory动态生成需要的组件实例，并绑定属性。有了这个工具，后续扩展其他类型的渲染器就只需要新增一个静态方法即可。