组件：components.MgmtGrid.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
creationComplete="init()">
<mx:VBox width="100%"
height="100%">
<mx:DataGrid width="100%"
height="100%"
styleName="{_gridStyleName}"
id="_grid"
dataProvider="{_dataAc}"
headerRelease="headerRelease(event)"/>
<mx:HRule width="100%"
strokeWidth="1"
strokeColor="#CCCCCC"/>
<mx:HBox borderStyle="none"
height="30"
width="100%"
horizontalGap="0"
paddingLeft="10"
paddingRight="10"
verticalAlign="middle">
<mx:HBox borderStyle="none"
width="100%"
horizontalAlign="left"
id="_boxFuncBtn"/>
<mx:Spacer width="100%"/>
<mx:Text text="{' 第'+_pageIndex+'页/共'+_pageCount+'页'+' 共'+_totalRecord+'条记录'}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:LinkButton id="_lbtnFirst"
label="首页"
click="_pageIndex=0;load();"
enabled="{_lbtnPrevious.enabled}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:LinkButton id="_lbtnPrevious"
label="上一页"
click="_pageIndex--;load();"
enabled="{_pageIndex!=1?true:false}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:LinkButton id="_lbtnNext"
label="下一页"
click="_pageIndex++;load();"
enabled="{_pageCount>(_pageIndex)?true:false}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:LinkButton id="_lbtnLast"
label="尾页"
click="_pageIndex=_pageCount;load();"
enabled="{_lbtnNext.enabled}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:NumericStepper id="_nsPageNum"
stepSize="1"
minimum="1"
maximum="{_pageCount}"
enabled="{_lbtnJump.enabled}"
value="{_pageIndex}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
<mx:LinkButton id="_lbtnJump"
label="跳转"
click="_pageIndex=_nsPageNum.value;load();"
enabled="{_pageCount>1?true:false}"
fontWeight="{_pagerFontWeight}"
fontSize="{_pagerFontSize}"/>
</mx:HBox>
</mx:VBox>
<mx:DataGridColumn sortable="false"
id="_columnCheckBox"
draggable="false"
width="50"
textAlign="center">
<mx:headerRenderer>
<mx:Component>
<mx:CheckBox label="全选"
selected="{outerDocument._selectAll}"
click="outerDocument.clickAll(data)"/>
</mx:Component>
</mx:headerRenderer>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{outerDocument.isSelected(data)}"
click="outerDocument.clickSingle(data)"/>
<!-- <mx:CheckBox selected="{outerDocument.isSelected(data)}" click="data[outerDocument._selectedField] = !data[outerDocument._selectedField]"/> -->
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<!-- hide properties -->
<mx:Metadata>
[Exclude(name="_grid", kind="property")]
[Exclude(name="_columnCheckBox", kind="property")]
[Exclude(name="_boxFuncBtn", kind="property")]
[Exclude(name="_lbtnFirst", kind="property")]
[Exclude(name="_lbtnPrevious", kind="property")]
[Exclude(name="_lbtnNext", kind="property")]
[Exclude(name="_lbtnLast", kind="property")]
[Exclude(name="_nsPageNum", kind="property")]
[Exclude(name="_lbtnJump", kind="property")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.charts.BubbleChart;
import mx.controls.Button;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var _pageSize:int=20;
[Bindable]
private var _pageIndex:int=1;
[Bindable]
private var _pageCount:int=1;
[Bindable]
private var _totalRecord:int=0;
[Bindable]
private var _pagerFontWeight:String="normal";
[Bindable]
private var _pagerFontSize:int=12;
[Bindable]
private var _gridStyleName:String="";
[Bindable]
private var _enableCheckBox:Boolean=true;
[Bindable]
private var _gridColumns:Array=new Array();
[Bindable]
internal var _selectAll:Boolean=false;
[Bindable]
internal var _selectedField:String="selected";
[Bindable]
private var _dataAc:ArrayCollection=new ArrayCollection;
private var _funcLoad:Function=null;
private var _localSort:Boolean=true;
private var _sortObject:Object=null;
private var _btnDescs:Array=null;
private var _btnStyleName:String="";
private var _btnHandler:Function=null;
/**
* 设置分页信息。<br>
* 在外部获取分页的信息，包括页数、当前页、所有记录数，然后告诉MgmtGrid进行显示。<br>
* @param pc 分页数(pageCount)
* @param pi 当前页码(pageIndex)，从1开始
* @param tr 所有记录数量（totalRecord)
* */
public function setPageInfo(pc:int, pi:int, tr:int):void
{
this._pageCount=pc;
this._pageIndex=pi;
this._totalRecord=tr;
}
/**
* 设置分页大小，默认是20。<br>
* */
public function set pageSize(ps:int):void
{
this._pageSize=ps;
}
/**
* 设置数据加载回调方法。系统会根据通过该方法通知外部获取数据，并给定数据相关参数。<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
{
this._funcLoad=f;
}
/**
* 是否本地排序。true的话，则不需要向服务器请求全局排序，只是利用flex自身的排序功能<br>
* 在当前显示页面排序。<br>
* */
public function set localSort(lc:Boolean):void
{
this._localSort=lc;
}
/**
* 设置分页字体宽度，默认是normal。
* */
public function set pagerFontWeight(w:String):void
{
this._pagerFontWeight=w;
}
/**
* 设置分页字体大小，默认是12。
* */
public function set pagerFontSize(s:int):void
{
this._pagerFontSize=s;
}
/**
* 设置表格的式样名称。该式样将会影响表格的显示外观。
* */
public function set gridStyleName(s:String):void
{
this._gridStyleName=s;
}
/**
* 是否需要显示复选框。显示复选框时，有全选功能，这个比较常用<br>
* 如果选择复选框，那么选中的数据项目根据复选框的状态来判断。<br>
* 如果没有复选框，那么选中的数据项目根据DataGrid选中的项目来判断。<br>
* */
public function set enableCheckBox(b:Boolean):void
{
this._enableCheckBox=b;
}
/**
* 设置表格列DataGridColumn
* */
public function set gridColumns(columns:Array):void
{
this._gridColumns=columns;
}
/**
* 设置选中列的标识。<br>
* 该项只有在enableCheckBox=true的时候有效。<br>
* 系统会根据这个字段来判断是否选中的状态。这个字段没有实际意义，<br>
* 不要与数据列冲突。<br>
* */
public function set selectedField(s:String):void
{
this._selectedField=s;
}
/**
* 按钮描述。<br>
* 系统会根据按钮描述生成相关功能按钮，这些按钮被点击后，会触发<br>
* 按钮处理方法，用户可以根据处理方法里的按钮id执行相关操作。<br>
* 按钮描述对象有id、label、styleName几个字段。<br>
* */
public function set btnDescs(arr:Array):void
{
this._btnDescs=arr;
}
/**
* 全局按钮样式名称。<br>
* 如果按钮描述对象里设置了样式名称，则根据按钮自己的样式绘制，<br>
* 否则根据全局按钮样式绘制。<br>
* */
public function set btnStyleName(s:String):void
{
this._btnStyleName=s;
}
/**
* 设置按钮点击处理方法。<br>
* 该方法定义如下:<br>
* <code>function handler(id:String):void</code><br>
* id是被点击的按钮对应的id<br>
* */
public function set btnHandler(f:Function):void
{
this._btnHandler=f;
}
/**
* 获得选中的数据项，如果选中多项，则返回第一项。<br>
* @return 返回第一个选中的项目，如果没有选中，则返回null
* */
public function get selectedItem():Object
{
if (this._enableCheckBox)
{
for each (var o:Object in this._dataAc)
{
if (isSelected(o))
{
return o;
}
}
return null;
}
return this._grid.selectedItem;
}
/**
* 获得选中的数据项。<br>
* @return 返回装有选中项的Array对象，如果没有选中项，则返回null
* */
public function get selectedItems():Object
{
if (this._enableCheckBox)
{
var arr:Array=new Array;
for each (var o:Object in this._dataAc)
{
if (isSelected(o))
{
arr.push(o);
}
}
return arr.length == 0 ? null : arr;
}
return this._grid.selectedItems;
}
/**
* 增加一个数据项
* */
public function addData(o:Object):void
{
this._dataAc.addItem(o);
}
/**
* 增加多个数据项
* @param o 多个数据项，必须是collection
* */
public function addDatas(o:Object):void
{
for each (var d:Object in o)
{
addData(d);
}
}
/**
* 删除数据项
* @param o 要删除的数据项
* */
public function removeData(o:Object):void
{
var i:int=this._dataAc.getItemIndex(o);
if (i >= 0)
{
this._dataAc.removeItemAt(i);
}
}
/**
* 删除多个数据项
* @param o 要删除的数据项，必须为collection
* */
public function removeDatas(o:Object):void
{
for each (var i:Object in o)
{
removeData(i);
}
}
/**
* 更新数据字段
* @param o 要更新的数据
* @param field 数据的字段名
* @param v 新的字段值
* */
public function updateData(o:Object, field:String, v:Object):void
{
var i:int=this._dataAc.getItemIndex(o);
if (i >= 0)
{
o[field]=v;
this._dataAc.itemUpdated(o, field, null, v);
}
}
public function updateDataObj(oldItem:Object,newItem:Object):void
{
var i:int=this._dataAc.getItemIndex(oldItem);
if (i >= 0)
{
for(var field in newItem)
{
oldItem[field]=newItem[field];
this._dataAc.itemUpdated(oldItem, field, null, newItem[field]);
}
}
}
public function refresh():void
{
this._dataAc.refresh();
}
/**
* 如果组件不需要再使用，强烈建议调用destroy进行资源释放，<br>
* 以防内存泄漏。<br>
* */
public function destroy():void
{
unInitButtons();
}
private function init():void
{
initColumns();
initButtons();
load();
}
private function initColumns():void
{
var arr:Array=new Array;
if (this._enableCheckBox)
{
arr.push(this._columnCheckBox);
}
for each (var o:Object in this._gridColumns)
{
arr.push(o);
}
this._grid.columns=arr;
}
private function initButtons():void
{
if (this._btnDescs != null)
{
for each (var o:Object in this._btnDescs)
{
var btn:Button=new Button;
btn.id=o.id;
btn.label=o.label;
btn.styleName=(o.styleName == undefined) ? this._btnStyleName : o.styleName;
btn.addEventListener(MouseEvent.CLICK, onBtnClick);
this._boxFuncBtn.addChild(btn);
}
}
}
private function unInitButtons():void
{
for each (var o:Object in this._boxFuncBtn.getChildren())
{
Button(o).removeEventListener(MouseEvent.CLICK, onBtnClick);
}
}
private function onBtnClick(e:MouseEvent):void
{
if (e.currentTarget is Button)
{
if (this._btnHandler != null)
{
this._btnHandler(Button(e.currentTarget).id);
}
}
}
private function load():void
{
this._dataAc.removeAll();
if (this._funcLoad != null)
{
this._funcLoad(this._pageSize, this._pageIndex, this._sortObject);
}
}
internal function clickAll(data:Object=null):void
{
this._selectAll=!this._selectAll;
for each (var o:Object in this._dataAc)
{
o[this._selectedField]=this._selectAll;
}
this._grid.invalidateList();
}
internal function clickSingle(data:Object=null):void
{
data[this._selectedField]=!isSelected(data);
this._grid.invalidateList();
}
internal function isSelected(data:Object):Boolean
{
var v:Object=String(data[this._selectedField]);
return v == "true";
}
private function headerRelease(event:DataGridEvent):void
{
if (!this._localSort)
{
var dc:DataGridColumn=DataGridColumn(event.itemRenderer.data);
if (this._sortObject == null)
{
this._sortObject=new Object;
}
this._sortObject.index=this._enableCheckBox ? (event.columnIndex - 1) : event.columnIndex;
this._sortObject.desc=dc.sortDescending;
load();
}
}
]]>
</mx:Script>
</mx:Panel>
sample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:components="components.*"
creationComplete="init()">
<components:MgmtGrid id="grid"
width="80%"
height="400"
title="Hello"
styleName="ztGridPanel"
pagerFontSize="12"
gridColumns="{cols}"
enableCheckBox="true"
selectedField="selected"
localSort="false"
loadFunc="load"
pageSize="2"
btnDescs="{btnDescs}"
btnHandler="btnHandler"
btnStyleName="ztGridBtn"
gridStyleName="ztDataGrid">
</components:MgmtGrid>
<!---->
<mx:Array id="cols">
<mx:DataGridColumn headerText="Text"
dataField="label"
sortable="false"/>
<mx:DataGridColumn headerText="Integer"
dataField="iv"/>
<mx:DataGridColumn headerText="Long"
dataField="lv"/>
<mx:DataGridColumn headerText="Boolean"
dataField="selected"/>
</mx:Array>
<mx:Style>
.ztGridPanel {
borderColor: #0099ff;
borderAlpha: 1;
borderThicknessLeft: 1;
borderThicknessTop: 1;
borderThicknessBottom: 1;
borderThicknessRight: 1;
cornerRadius: 0;
headerHeight: 25;
backgroundAlpha: 1;
headerColors: #3399ff, #0066ff;
titleStyleName: "ztGridpanelTitle";
dropShadowEnabled: false;
}
.ztGridpanelTitle {
textAlign: center;
fontFamily: Arial;
fontSize: 13;
font-weight:bold;
color:#ffffff;
}
.ztDataGrid {
headerStyleName: "ztdataGridHeaderStyle";
}
.ztdataGridHeaderStyle {
color: #666666;
fontFamily: Arial;
fontSize: 12;
textAlign: center;
font-weight:bold;
}
.ztGridBtn {
fontSize: 10;
textAlign: center;
font-weight:normal;
}
</mx:Style>
<mx:Button click="func()"
label="Show Select"/>
<mx:Button click="addFunc('add')"
label="Add"/>
<mx:Script>
<![CDATA[
import components.MgmtGrid;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.managers.PopUpManager;
[Bindable]
private var btnDescs:Array=new Array({"id": "btnAdd", "label": "添加"}, {"id": "btnModify", "label": "修改"}, {"id": "btnDelete", "label": "删除"});
[Bindable]
public var dgProvider:ArrayCollection;
// private var grid:MgmtGrid = new MgmtGrid;
private function func():void
{
var arr:Object=grid.selectedItems;
if (arr != null)
{
var index:int=0;
for each (var o:Object in arr)
{
index++;
trace(o.@label + " " + o.@iv + " " + o.@lv + " " + o.@selected);
}
Alert.show("您选择了" + index + "个元素", "title");
}
}
//初始化表格数据
/** ArrayCollection=new ArrayCollection;*/
private function initFunction():ArrayCollection
{
var ret:ArrayCollection=new ArrayCollection;
var prodIndex:int = 1;
for (var z:int=0; z < 10; z++)
{
var prod1:Object={};
prod1.label=prodIndex * 7;
prod1.iv=prodIndex;
prod1.lv=prodIndex++;
prod1.selected = prodIndex%2==0?"true":"false";
ret.addItem(prod1);
}
return ret;
}
private function init():void
{
//this._grid.dataProvider = xml.item;//
//this._grid.dataProvider = new Array({"label":"Hello", "iv":"32", "lv":"32.00"}, {"label":"World", "iv":"31", "lv":"31.00"});
//grid.addDatas(xml.item);
// this.grid.gridColumns = cols;
// this.grid.enableCheckBox = true;
// this.grid.styleName = "ztGridPanel";
// this.grid.btnDescs = btnDescs;
// this.grid.loadFunc = load;
// this.grid.selectedField = "@selected";
// this.addChild(this.grid);
}
private function addFunc(tFlag:String):void
{
var auWindow:AUSample =
AUSample(PopUpManager.createPopUp(this, AUSample, true));
auWindow.title = tFlag=="add"?"添加窗口":"修改窗口";
auWindow.flag = tFlag=="add"?"add":"mod";
auWindow.parentAddRow = addRow;
auWindow.parentModRow = modRow;
PopUpManager.centerPopUp(auWindow);
}
private function addRow(row:Object):void
{
this.grid.addData(row);
}
private function modRow(row:Object):void
{
var selectedItem :Object = this.grid.selectedItem ;
if(selectedItem != null)
{
this.grid.updateDataObj(selectedItem,row);
}
}
private function load(ps:int, pi:int, so:Object):void
{
trace(ps + " " + pi);
if (so != null)
{
trace(so.index + " " + so.desc);
}
var ret:ArrayCollection = initFunction();
//this.grid.setPageInfo(allPage, nowPage, pagesize);
this.grid.setPageInfo(2, 1, 4);
this.grid.addDatas(ret);
}
private function btnHandler(id:String):void
{
if (id == "btnDelete")
{
var o:Object=this.grid.selectedItems;
if (o != null)
{
this.grid.removeDatas(o);
}
}
else if (id == "btnModify")
{
o=this.grid.selectedItem;
if (o != null)
{
//this.grid.updateData(o, "@label", "new");
addFunc("mod");
}
}
else if (id == "btnAdd")
{
addFunc("add");
}
}
]]>
</mx:Script>
</mx:Application>
弹出窗口AUSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="348"
height="308"
fontSize="12"
creationComplete="init()"
>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.controls.Alert;
//初始化标志
public var flag:String="";
public var parentAddRow:Function;
public var parentModRow:Function;
public function init():void
{
if(flag == "mod")
{
label2.text = "mod";
}
else if(flag == "add")
{
label2.text = "add";
}
}
//确定键后
public function setData():void
{
var formObject:Object = new Object();
formObject.label = label2.text;
formObject.iv = iv.text;
formObject.lv = lv.text;
formObject.selected = selected.text;
if(flag == "mod")
{
parentModRow(formObject);
}
else if(flag == "add")
{
parentAddRow(formObject);
}
PopUpManager.removePopUp(this);
}
//关闭窗口，同时刷新父窗口
private function Close():void{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Form x="0"
y="0"
width="100%"
height="220">
<mx:FormItem label="Text"
width="235">
<mx:TextInput id="label2"/>
</mx:FormItem>
<mx:FormItem label="Integer"
width="235">
<mx:TextInput id="iv"/>
</mx:FormItem>
<mx:FormItem label="Long"
width="235">
<mx:TextInput id="lv"/>
</mx:FormItem>
<mx:FormItem label="Boolean"
width="235">
<mx:TextInput id="selected"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar height="40"
y="114"
horizontalAlign="right"
cornerRadius="0"
alpha="1.0">
<mx:Button label="确定"
click="setData()"/>
<mx:Button label="关闭"
click="Close()"/>
</mx:ControlBar>
</mx:TitleWindow>
