Flex写的管理表格组件，集成分页、增删改功能

刚刚用Flex实现了一个基本的管理表格组件，支持分页、增、删、改、多选等功能。效果如下：



主要是把DataGrid这个控件放到Panel中，再加上一些分页的LinkBar
可以在mxml里使用，也可以用actionscript动态设置。
数据模型可以是xml，也可以是json或者Object。
源码和示例在附件中。
接口说明：

/**
 * 设置分页信息。<br>
 * 在外部获取分页的信息，包括页数、当前页、所有记录数，然后告诉MgmtGrid进行显示。<br>
 * @param pc 分页数(pageCount)
 * @param pi 当前页码(pageIndex)，从1开始
 * @param tr 所有记录数量（totalRecord)
 * */
public function setPageInfo(pc:int, pi:int, tr:int):void

/**
 * 设置分页大小，默认是20。<br>
 * */
public function set pageSize(ps:int):void

/**
 * 设置数据加载回调方法。系统会根据通过该方法通知外部获取数据，并给定数据相关参数。<br>
 * 方法定义如下：<br>
 * <code>function fun(ps:int, pi:int, so:Object)</code><br>
 * 其中ps是分页大小，pi是当前页码，so是排序参数。<br>
 * 排序参数是一个Object对象，拥有2个参数：<br>
 * <ul>
 * <li>index</li>排序列序号，指明用那列进行排序
 * <li>desc</li>是否是升序，true表示升序，false表示降序
 * 外部获取数据接口要根据这些参数向服务器请求数据<br>
 * */
public function set loadFunc(f:Function):void

/**
 * 是否本地排序。true的话，则不需要向服务器请求全局排序，只是利用flex自身的排序功能<br>
 * 在当前显示页面排序。<br>
 * */
public function set localSort(lc:Boolean):void

/**
 * 设置分页字体宽度，默认是normal。
 * */
public function set pagerFontWeight(w:String):void

/**
 * 设置分页字体大小，默认是12。
 * */
public function set pagerFontSize(s:int):void

/**
 * 设置表格的式样名称。该式样将会影响表格的显示外观。
 * */
public function set gridStyleName(s:String):void

/**
 * 是否需要显示复选框。显示复选框时，有全选功能，这个比较常用<br>
 * 如果选择复选框，那么选中的数据项目根据复选框的状态来判断。<br>
 * 如果没有复选框，那么选中的数据项目根据DataGrid选中的项目来判断。<br>
 * */
public function set enableCheckBox(b:Boolean):void

/**
 * 设置表格列DataGridColumn
 * */
public function set gridColumns(columns:Array):void

/**
 * 设置选中列的标识。<br>
 * 该项只有在enableCheckBox=true的时候有效。<br>
 * 系统会根据这个字段来判断是否选中的状态。这个字段没有实际意义，<br>
 * 不要与数据列冲突。<br>
 * */
public function set selectedField(s:String):void

/**
 * 按钮描述。<br>
 * 系统会根据按钮描述生成相关功能按钮，这些按钮被点击后，会触发<br>
 * 按钮处理方法，用户可以根据处理方法里的按钮id执行相关操作。<br>
 * 按钮描述对象有id、label、styleName几个字段。<br>
 * */
public function set btnDescs(arr:Array):void

/**
 * 全局按钮样式名称。<br>
 * 如果按钮描述对象里设置了样式名称，则根据按钮自己的样式绘制，<br>
 * 否则根据全局按钮样式绘制。<br>
 * */
public function set btnStyleName(s:String):void

/**
 * 设置按钮点击处理方法。<br>
 * 该方法定义如下:<br>
 * <code>function handler(id:String):void</code><br>
 * id是被点击的按钮对应的id<br>
 * */
public function set btnHandler(f:Function):void

/**
 * 获得选中的数据项，如果选中多项，则返回第一项。<br>
 * @return 返回第一个选中的项目，如果没有选中，则返回null
 * */
public function get selectedItem():Object

/**
 * 获得选中的数据项。<br>
 * @return 返回装有选中项的Array对象，如果没有选中项，则返回null
 * */
public function get selectedItems():Object

/**
 * 增加一个数据项
 * */
public function addData(o:Object):void

/**
 * 增加多个数据项
 * @param o 多个数据项，必须是collection
 * */
public function addDatas(o:Object):void

/**
 * 删除数据项
 * @param o 要删除的数据项
 * */
public function removeData(o:Object):void

/**
 * 删除多个数据项
 * @param o 要删除的数据项，必须为collection
 * */
public function removeDatas(o:Object):void

/**
 * 更新数据字段
 * @param o 要更新的数据
 * @param field 数据的字段名
 * @param v 新的字段值
 * */
public function updateData(o:Object, field:String, v:Object):void

/**
 * 如果组件不需要再使用，强烈建议调用destroy进行资源释放，<br>
 * 以防内存泄漏。<br>
 * */
public function destroy():void

评论

2 楼 baby369043948 2011-09-26  

多谢分享。

1 楼 ayiui4566 2010-07-22  

不错，收下了。