MecGrid 改变单元格样式

最近用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 两个文件的配置，合并到代码中即可。。。