hbing110
- 浏览: 87195 次
- 性别:
- 来自: 北京
-
最新评论
-
袁玙璠：
第一次接触，学习了
通过页面传递参数到flex中的几种方法 -
shikonglaike：
不错。呵呵！只是目前火狐还不支持flash player 10 ...
Flex保存文件(FileReference.save) -
hbing110：
对不起 没有 我当时只是在ie7下做的开发。
webwork 文件下载 -
xrqsjj：
有没测试在IE6下进行下载
webwork 文件下载 -
elvishehai：
为什么我的取不到了。
通过页面传递参数到flex中的几种方法
flex 合并单元格
flex中对于合并单元格没有很好的解决方案,有的可能会用OLAPDataGrid来实现,不过感觉效果还不是很好,下面有个例子:
不过后来在网上看到MecGrid感觉还不错,所以拿上来与大家分享.
首先得把它的swc加进来,加到flex build path里面.
下面就是例子:
好象是这样...
真的只能用HTML画这样的表格了吗？？不知道还有没有其它方法。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler();">
<mx:Script>
<![CDATA[
import mx.rpc.AsyncResponder;
import mx.rpc.AsyncToken;
import mx.olap.OLAPQuery;
import mx.olap.OLAPSet;
import mx.olap.IOLAPQuery;
import mx.olap.IOLAPQueryAxis;
import mx.olap.IOLAPCube;
import mx.olap.OLAPResult;
import mx.events.CubeEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
//
// Format of Objects in the ArrayCollection:
//
// data:Object = {
// customer:"AAA",
// product:"ColdFusion",
// quarter:"Q1"
// revenue: "100.00"
// }
//
[Bindable]
private var flatData:ArrayCollection = new ArrayCollection(
[
{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:210, cost:25},
{customer:"AAA", product:"Flex", quarter:"Q2", revenue:210, cost:25},
{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:250, cost:125},
{customer:"AAA", product:"Flash", quarter:"Q4", revenue:430, cost:75},
{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:125, cost:20},
{customer:"BBB", product:"Flex", quarter:"Q3", revenue:210, cost:20},
{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:320, cost:120},
{customer:"BBB", product:"Flash", quarter:"Q1", revenue:280, cost:70},
{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:375, cost:120},
{customer:"CCC", product:"Flex", quarter:"Q4", revenue:430, cost:120},
{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:470, cost:220},
{customer:"CCC", product:"Flash", quarter:"Q2", revenue:570, cost:170},
{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
{customer:"AAA", product:"Flash", quarter:"Q3", revenue:670, cost:75},
{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:175, cost:20},
{customer:"BBB", product:"Flex", quarter:"Q2", revenue:210, cost:20},
{customer:"BBB", product:"Dreamweaver",quarter:"Q3", revenue:120, cost:120},
{customer:"BBB", product:"Flash", quarter:"Q4", revenue:310, cost:70},
{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:385, cost:120},
{customer:"CCC", product:"Flex", quarter:"Q2", revenue:340, cost:120},
{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:470, cost:220},
{customer:"CCC", product:"Flash", quarter:"Q4", revenue:270, cost:170},
{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:100, cost:25},
{customer:"AAA", product:"Flex", quarter:"Q2", revenue:150, cost:25},
{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:200, cost:125},
{customer:"AAA", product:"Flash", quarter:"Q4", revenue:300, cost:75},
{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:175, cost:20},
{customer:"BBB", product:"Flex", quarter:"Q3", revenue:100, cost:20},
{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:270, cost:120},
{customer:"BBB", product:"Flash", quarter:"Q1", revenue:370, cost:70},
{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:410, cost:120},
{customer:"CCC", product:"Flex", quarter:"Q4", revenue:300, cost:320},
{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:510, cost:220},
{customer:"CCC", product:"Flash", quarter:"Q2", revenue:620, cost:170},
{customer:"AAA", product:"ColdFusion", quarter:"Q4", revenue:215, cost:90},
{customer:"AAA", product:"Flex", quarter:"Q1", revenue:210, cost:90},
{customer:"AAA", product:"Dreamweaver", quarter:"Q2", revenue:175, cost:190},
{customer:"AAA", product:"Flash", quarter:"Q3", revenue:420, cost:75},
{customer:"BBB", product:"ColdFusion", quarter:"Q1", revenue:240, cost:20},
{customer:"BBB", product:"Flex", quarter:"Q2", revenue:100, cost:20},
{customer:"BBB", product:"Dreamweaver", quarter:"Q3", revenue:270, cost:120},
{customer:"BBB", product:"Flash", quarter:"Q4", revenue:370, cost:70},
{customer:"CCC", product:"ColdFusion", quarter:"Q1", revenue:375, cost:120},
{customer:"CCC", product:"Flex", quarter:"Q2", revenue:420, cost:120},
{customer:"CCC", product:"Dreamweaver", quarter:"Q3", revenue:680, cost:220},
{customer:"CCC", product:"Flash", quarter:"Q4", revenue:570, cost:170}
]);
private function creationCompleteHandler():void {
// You must initialize the cube before you
// can execute a query on it.
myMXMLCube.refresh();
}
// Create the OLAP query.
private function getQuery(cube:IOLAPCube):IOLAPQuery {
// Create an instance of OLAPQuery to represent the query.
var query:OLAPQuery = new OLAPQuery;
// Get the row axis from the query instance.
var rowQueryAxis:IOLAPQueryAxis =
query.getAxis(OLAPQuery.ROW_AXIS);
// Create an OLAPSet instance to configure the axis.
var productSet:OLAPSet = new OLAPSet;
// Add the Product to the row to aggregate data
// by the Product dimension.
productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
// Add the OLAPSet instance to the axis.
rowQueryAxis.addSet(productSet);
// Get the column axis from the query instance, and configure it
// to aggregate the columns by the Quarter dimension.
var colQueryAxis:IOLAPQueryAxis =
query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
return query;
}
// Event handler to execute the OLAP query
// after the cube completes initialization.
private function runQuery(event:CubeEvent):void {
// Get cube.
var cube:IOLAPCube = IOLAPCube(event.currentTarget);
// Create a query instance.
var query:IOLAPQuery = getQuery(cube);
// Execute the query.
var token:AsyncToken = cube.execute(query);
// Setup handlers for the query results.
token.addResponder(new AsyncResponder(showResult, showFault));
}
// Handle a query fault.
private function showFault(result:Object, token:Object):void {
Alert.show("Error in query.");
}
// Handle a successful query by passing the query results to
// the OLAPDataGrid control..
private function showResult(result:Object, token:Object):void {
if (!result) {
Alert.show("No results from query.");
return;
}
myOLAPDG.dataProvider= result as OLAPResult;
}
]]>
</mx:Script>
<mx:OLAPCube name="FlatSchemaCube"
dataProvider="{flatData}"
id="myMXMLCube"
complete="runQuery(event);">
<mx:OLAPDimension name="CustomerDim">
<mx:OLAPAttribute name="Customer" dataField="customer"/>
<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
<mx:OLAPLevel attributeName="Customer"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPDimension name="ProductDim">
<mx:OLAPAttribute name="Product" dataField="product"/>
<mx:OLAPHierarchy name="ProductHier" hasAll="true">
<mx:OLAPLevel attributeName="Product"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPDimension name="QuarterDim">
<mx:OLAPAttribute name="Quarter" dataField="quarter"/>
<mx:OLAPHierarchy name="QuarterHier" hasAll="true">
<mx:OLAPLevel attributeName="Quarter"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPMeasure name="Revenue"
dataField="revenue"
aggregator="SUM"/>
</mx:OLAPCube>
<mx:Panel title="OLAPCube Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
</mx:Panel>
</mx:Application>
不过后来在网上看到MecGrid感觉还不错,所以拿上来与大家分享.
首先得把它的swc加进来,加到flex build path里面.
下面就是例子:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:MecGrid="com.mechan.MecGrid.*" creationComplete="initApp()" viewSourceURL="srcview/index.html">
<mx:Style>
FilterRenderer
{
fontSize: 8;
verticalScrollBarStyleName: filterRendererScrollStyle;
}
.filterRendererScrollStyle {
downArrowUpSkin: Embed(source="/assets/downArrow.png");
downArrowOverSkin: Embed(source="/assets/downArrow.png");
downArrowDownSkin: Embed(source="/assets/downArrow.png");
upArrowUpSkin: Embed(source="/assets/upArrow.png");
upArrowOverSkin: Embed(source="/assets/upArrow.png");
upArrowDownSkin: Embed(source="/assets/upArrow.png");
thumbDownSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
thumbUpSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
thumbOverSkin: Embed(source="/assets/thumb.png",
scaleGridLeft="7", scaleGridTop="5", scaleGridRight="8", scaleGridBottom="7");
trackSkin: Embed(source="/assets/scrolltrack.png",
scaleGridLeft="7", scaleGridTop="4", scaleGridRight="8", scaleGridBottom="6" );
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.mechan.MecGrid.mecGridClasses.MecGridEvent;
import mx.collections.ArrayCollection;
import com.mechan.MecGrid.mecGridClasses.MecGridConst;
import com.mechan.MecGrid.mecGridClasses.CellOp;
// This demonstrates how you can set MecGrid properties by XML.
// You can build ResourceXML With MecGridWizard by Exporting and copy to clipboard the source XML.
//
// Reversely you can set the property of XML String to Binary data and vice versa.
//
[Bindable]
private var datasource:ArrayCollection;
private var dp:Array = [{selected:false, country:'Korea', city:'Ulsan', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Korea', city:'Seoul', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Korea', city:'Pusan', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Korea', city:'Mokpo', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Korea', city:'Anyang', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Korea', city:'Sangju', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'New York', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'South Field', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'Irvington', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'Los Altos', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'Chicago', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United States', city:'Tucson', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'France', city:'Paris', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'France', city:'Le Mans', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'France', city:'Lyon', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'France', city:'Marseille', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Germany', city:'Berlin', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Germany', city:'Hamburg', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'Germany', city:'Dusseldorf', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United Kingdom', city:'London', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United Kingdom', city:'Cambridge', qt1:0, qt2:0, qt3:0, qt4:0, avg:''},
{selected:false, country:'United Kingdom', city:'Birmingham', qt1:0, qt2:0, qt3:0, qt4:0, avg:''}]
private function initApp():void
{
mgrid.dragEnabled = true;
mgrid.dropEnabled = true;
mgrid.dragMoveEnabled = true;
mgrid.dropMode = MecGridConst.DRAGMODE_ROW | MecGridConst.DRAGMODE_COLUMN;
applyDataProvider();
}
private function applyDataProvider():void
{
var i:int;
var n:int = 0;
for (i=0; i < dp.length; i++)
{
dp[i].qt1 = Math.random() * 1000;
dp[i].qt2 = Math.random() * 1000;
dp[i].qt3 = Math.random() * 1000;
dp[i].qt4 = Math.random() * 1000;
n = i + mgrid.Rows.fixed;
dp[i].avg = "=(D" + n + " + E" + n + " + F" + n + " + G" + n + ") / 4";
}
mgrid.addEventListener(MecGridEvent.DATAPROVIDER_UPDATE_FINISHED, dataProviderUpdatedHandler);
datasource = new ArrayCollection(dp);
}
private function dataProviderUpdatedHandler(event:MecGridEvent):void
{
mgrid.removeEventListener(MecGridEvent.DATAPROVIDER_UPDATE_FINISHED, dataProviderUpdatedHandler);
mgrid.redraw = false;
mgrid.clearSubTotal();
mgrid.AddSubTotal("Total", [0, 1], MecGridConst.SUBTOTAL_SUM, -1, [2, 3, 4, 5], MecGridConst.SUBTOTAL_BELOWDATA);
mgrid.AddSubTotal("Country SubTotal", [1], MecGridConst.SUBTOTAL_SUM, 0, [2, 3, 4, 5], MecGridConst.SUBTOTAL_BELOWDATA);
mgrid.updateSubTotal();
mgrid.redraw = true;
}
private function changeData():void
{
applyDataProvider();
}
private function selectionModeChanged(event:Event):void
{
var selitem:String = uiSelectMode.selectedValue as String;
var selmode:int = CellOp.SELECT_SINGLE;
switch (selitem)
{
case "row":
selmode = selmode | CellOp.SELECTIONMODE_ROW;
break;
case "cell":
selmode = selmode | CellOp.SELECTIONMODE_CELL;
break;
}
mgrid.SelectionMode = selmode;
}
]]>
</mx:Script>
<MecGrid:MecGrid id="mgrid" bottom="40" right="10" top="80" left="10" dataProvider="{datasource}" EnableRowFilter="{cboShowFilter.selected}">
<MecGrid:ResourceXML>
<mx:XML xmlns="">
<List>
<option cols="6" fixedrows="2" fixedcols="0" merge_option="4" merge_option_fixedcolumn="0" merge_option_fixedrow="2" showspreadsheet="F" selectionmode="17" sortoption="0" treeview="T" treeColumn="0" textalignment="6" textalignment_fixed="5"/>
<columns>
<column name="col_1" datafield="country" visible="T" editable="F" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10" formatstring="" merge="T" style="" header="Country;Country"/>
<column name="col_2" datafield="city" visible="T" editable="F" colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10" formatstring="" merge="T" style="" header="City;City"/>
<column name="col_3" datafield="qt1" visible="T" editable="F" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10" formatstring="#,###.##" merge="F" style="" header="Visitors;1st Quater (A)"/>
<column name="col_4" datafield="qt2" visible="T" editable="F" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10" formatstring="#,###.##" merge="F" style="test" header="Visitors;2nd Quater (B)"/>
<column name="col_5" datafield="qt3" visible="T" editable="F" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10" formatstring="#,###.##" merge="F" style="" header="Visitors;3rd Quater (C)"/>
<column name="col_6" datafield="qt4" visible="T" editable="F" colindex="5" autowidth="T" width="0" datatype="4" textalign="10" textalign_fixed="10" formatstring="#,###.##" merge="F" style="" header="Visitors;4th Quater (D)"/>
</columns>
<styles>
<style name="normal" backcolor1="16777215" backcolor2="16777215" bordercolor="12566463" borderthickness="1" fontstyle="0" forecolor="3355443"/>
<style name="fixedrow" backcolor1="15066597" backcolor2="15066597" bordercolor="6710886" borderthickness="1" fontstyle="0" forecolor="0"/>
<style name="fixedcolumn" backcolor1="16317653" backcolor2="15066597" bordercolor="6710886" borderthickness="1" fontstyle="0" forecolor="0"/>
<style name="spreadsheet" backcolor1="16317653" backcolor2="15066597" bordercolor="6710886" borderthickness="1" fontstyle="0" forecolor="0"/>
<style name="subtotal" backcolor1="16317653" backcolor2="15066597" bordercolor="12566463" borderthickness="1" fontstyle="2" forecolor="0"/>
<style name="test" backcolor1="13434879" backcolor2="16777215" bordercolor="12566463" borderthickness="1" fontstyle="5" forecolor="3355443"/>
</styles>
</List>
</mx:XML>
</MecGrid:ResourceXML>
</MecGrid:MecGrid>
<mx:Label x="10" y="10" text="MecGrid Demo with Row Filters" fontWeight="bold" fontSize="20" color="#FDFE88"/>
<mx:HBox width="100%" height="26" bottom="0">
<mx:LinkButton label="Copyright (c) 2008 MECHAN. All Rights Reserved"
click="navigateToURL(new URLRequest('http://code.google.com/p/flexspreadsheet/'));"
styleName="footerLink" alpha="0.2"
color="#DB93F9"/>
<mx:Spacer width="100%" />
<mx:LinkButton label="Created by MECHAN"
click="navigateToURL(new URLRequest('mailto:mechan93@gmail.com'));"
styleName="footerLink"
textDecoration="underline" alpha="0.2"
color="#04FCFF"/>
</mx:HBox>
<mx:Button label="Change Data" right="10" top="30" click="changeData()"/>
<mx:HBox y="54" right="10" left="10">
<mx:Label text="Selection Mode"/>
<mx:RadioButtonGroup id="uiSelectMode" change="selectionModeChanged(event)"/>
<mx:RadioButton label="Row Selection" groupName="uiSelectMode" value="row" selected="true"/>
<mx:RadioButton label="Cell Selection" groupName="uiSelectMode" value="cell"/>
<mx:CheckBox label="ShowFilter" id="cboShowFilter"/>
</mx:HBox>
</mx:Application>
分享到：
评论
6 楼
hbing110
2009-10-26
tieshow 写道
这个不开源？
好象是这样...
5 楼
tieshow
2009-10-21
这个不开源？
4 楼
woyaowenzi
2009-08-21
再问一下，MecGrid收费吗？
3 楼
woyaowenzi
2009-08-21
用MecGrid画出来的表格没办法全屏，貌似设置width好像有问题、
2 楼
woyaowenzi
2009-08-21
czwlucky 写道
OLAPDataGrid好像是分组统计用的，并没有把单元格合并。也许用传统的HTML画这样的表格是最好的选择了。。。
真的只能用HTML画这样的表格了吗？？不知道还有没有其它方法。
1 楼
czwlucky
2009-07-10
OLAPDataGrid好像是分组统计用的，并没有把单元格合并。也许用传统的HTML画这样的表格是最好的选择了。。。
发表评论
相关推荐
Flex 表格的单元格合并的简单示例,易懂简单
flex的datagrid合并单元格，实现某行、某列的合并，以及多行或者多列的合并。通过MecGrid实现！
主要介绍了Flex DataGrid 伪合并单元格思路及代码,需要的朋友可以参考下
本节主要介绍了Flex DataGrid 伪合并单元格实现思路,需要的朋友可以参考下
FLEX导出EXCEL支持合并隐藏单元格
通过MecGrid实现flex中datagrid形式的合并单元格，可以实现多行或者多列之间的合并！
Flex 的合并单元格 iBizGrid
--新增功能：单元格垂直合并 --新增功能：报表编辑器，标题行支持单个和多个单元格添加 --修改功能：修改报表编辑器，添加列，删除列功能 --修改功能：修改报表编辑器行编辑效果 --优化样式文件数据量 release 2.3....
C# 使用自定义DataGridView实现的报表设计器，可以自定义设置报表内容，合并表头，合并单元格，导出报表到Excel 和打印报表。