最近用Flex 在写东西,发现了有个东东叫 MecGrid 的项目。。。不是开源的,还没有文档。。。好吧。。。
因为工作需要,然后研究了下。最近写出这么个demo 以后用到的时候就来此处参考。
该demo的功能是改变单元格样式。包括字体颜色,背景颜色,字体样式:加粗加下划线什么的,表格边框颜色大小。。。都可以改。
不管是列头的固定表格,还是普通的数据表格。都可以改。
Flex 代码如下,环境 Flex SDK 版本为 3.6 ,还需要引入 mecGrid 的那两个文件。通用的文件。如果没有那就戳这里下载。
先上个图。。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600"
xmlns:MecGrid="com.mechan.MecGrid.*" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import com.mechan.MecGrid.mecGridClasses.CellOp;
import com.mechan.MecGrid.mecGridClasses.MecGridConst;
import com.mechan.MecGrid.mecGridClasses.MecGridEvent;
import com.mechan.MecGrid.mecGridClasses.SelectedItem;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private function initApp():void
{
loadDataProvider();
}
[Bindable]
private var dpBorderThickness:Array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
private var xml:XML =
<node id="1" name="Companies" type="COMPANIES" desc="All Companies" statusIcon="statusIcon" ratio="60">
<node id="2" name="Adobe" type="COMPANY" desc="Adobe inc." statusIcon="statusIcon" ratio="30.7">
<node id="5" name="Adobe Consulting" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" ratio="20.6"/>
<node id="6" name="EDBU" type="COMPANY" desc="Database company" statusIcon="statusIcon" ratio="10.9">
<node name="FLEX1" type="SOLUTION" desc="Plus Business Solution" statusIcon="" ratio="10.9"/>
<node name="FLEX2" type="SOLUTION" desc="Plus Business Solution" statusIcon="" ratio="10.9"/>
<node name="FLEX3" type="SOLUTION" desc="Plus Business Solution" statusIcon="" ratio="10.9"/>
<node name="FLEX4" type="SOLUTION" desc="Plus Business Solution" statusIcon="" ratio="10.9"/>
<node name="FLEX5" type="SOLUTION" desc="Plus Business Solution" statusIcon="" ratio="10.9"/>
</node>
</node>
<node id="3" name="Macromedia" type="COMPANY" desc="Adobe (formerly macromedia)" statusIcon="statusIcon" ratio="20.7">
<node name="Flash1" type="SOLUTION" desc="FLASH (WEB RichMedia Solution)" statusIcon="" ratio="10.4"/>
<node name="Flash2" type="SOLUTION" desc="FLASH (WEB RichMedia Solution)" statusIcon="" ratio="10.4"/>
<node name="Flash3" type="SOLUTION" desc="FLASH (WEB RichMedia Solution)" statusIcon="" ratio="10.4"/>
<node name="Flash4" type="SOLUTION" desc="FLASH (WEB RichMedia Solution)" statusIcon="" ratio="10.4"/>
<node name="Flash5" type="SOLUTION" desc="FLASH (WEB RichMedia Solution)" statusIcon="" ratio="10.4"/>
</node>
</node>
private function loadDataProvider():void
{
mgrid.redraw = false;
mgrid.merge_option = MecGridConst.MERGE_FIXED | MecGridConst.MERGE_PREV;
mgrid.Rows.count = 0;
mgrid.Cols.count = 10;
//设置列头
mgrid.AddRow(0, "No.;Browser;Visits;Visits;Visits;Visits;Bounce Rates;Pageviews;Pageviews;PageViews");
mgrid.AddRow(1, "No.;Browser;Visits;%visits;New Visitors;Unique Visitors;Bounce Rates;Pageviews;Average;Time on site");
mgrid.Rows.fixed = 2;
mgrid.Cols.item(0).dataField = "@name";
mgrid.Cols.item(1).dataField = "@type";
mgrid.Cols.item(2).dataField = "@ratio";
mgrid.Cols.item(3).dataField = "@ratio";
mgrid.Cols.item(4).dataField = "@ratio";
mgrid.Cols.item(5).dataField = "@ratio";
mgrid.Cols.item(6).dataField = "@ratio";
mgrid.Cols.item(6).datatype = CellOp.STATUSBAR;
mgrid.Cols.item(7).dataField = "@ratio";
mgrid.Cols.item(8).dataField = "@ratio";
mgrid.Cols.item(9).dataField = "@ratio";
mgrid.treeGridData = true;
mgrid.dataProvider = xml;
//重画
mgrid.redraw = true;
}
/**
* 更改单元格样式 (测试使用)
*
* 2013-08-15 LJK add
*/
private function changeColorLayout():void
{
var row:int = Number(textInputrow.text =="" ? "0" : textInputrow.text);//行
var col:int = Number(textInputljk.text =="" ? "0" : textInputljk.text);//列
var style:int = Number(textInputstyle.text =="" ? "0" :textInputstyle.text);//字体样式 0:无 1;粗体 2:斜体 4:下划线 可组合
var bgcolor:uint = this.uiBackColor.selectedColor as uint;//背景颜色
var outerThickness:int = this.uiOuterBorderThickness.selectedItem as int;
var innerThickness:int = this.uiInnerBorderThickness.selectedItem as int;
//设置单元格样式(字体颜色边框等)
var sel1:SelectedItem = new SelectedItem(row,col);
var cr:ArrayCollection = new ArrayCollection();
cr.addItem(sel1);
this.mgrid.drawRegion(cr, bgcolor, uiForeColor.selectedColor, innerThickness, outerThickness, uiInsideBorderColor.selectedColor, uiOutsideBorderColor.selectedColor);
//设置单元格字体格式
this.mgrid.set_cell(CellOp.FONT_STYLE,row,col,style); //0:无 1;粗体 2:斜体 4:下划线 可组合
}
]]>
</mx:Script>
<mx:Label x="10" y="10" text="动态改变单元格样式 demo" fontSize="20" styleName="demoTitle"/>
<mx:VBox right="10" left="10" top="50" bottom="10">
<mx:VBox left="10" right="10" top="40" bottom="10">
<mx:HBox width="100%">
<mx:Label x="10" y="10" text="要改变样式的单元格:(行/列)"/>
<mx:ComboBox id="textInputrow" width="50" dataProvider="{dpBorderThickness}"></mx:ComboBox>
<mx:ComboBox id="textInputljk" width="50" dataProvider="{dpBorderThickness}"></mx:ComboBox>
<mx:Label x="10" y="10" text="字体格式(0/1/2/4:无/粗体/斜体/下划线):"/>
<mx:ComboBox id="textInputstyle" width="50" dataProvider="{dpBorderThickness}"></mx:ComboBox>
<mx:Label x="10" y="10" text="背景颜色:"/>
<mx:ColorPicker id="uiBackColor" x="121" y="10" selectedColor="#95FAAD"/>
<mx:Label x="10" y="44" text="字体颜色:"/>
<mx:ColorPicker x="121" y="40" id="uiForeColor" selectedColor="#FE0202"/>
<mx:Label x="10" y="77" text="- Outline border"/>
<mx:ComboBox id="uiOuterBorderThickness" x="103" y="92" width="53" dataProvider="{dpBorderThickness}"></mx:ComboBox>
<mx:ColorPicker x="103" y="116" id="uiOutsideBorderColor" selectedColor="#A6A6FE"/>
<mx:Label x="10" y="150" text="- Inside border"/>
<mx:ComboBox id="uiInnerBorderThickness" x="103" y="174" width="53" dataProvider="{dpBorderThickness}"></mx:ComboBox>
<mx:ColorPicker x="103" y="200" id="uiInsideBorderColor" selectedColor="#A6A6FE"/>
<mx:Button x="10" y="248" label=" 应 用" click="changeColorLayout()"/>
</mx:HBox>
</mx:VBox>
<MecGrid:MecGrid id="mgrid" width="100%" height="100%"/>
</mx:VBox>
</mx:Application>
引入的 MecGrid 两个文件的配置,合并到代码中即可。。。