现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Flex > 正文
小 中 大
Flex中绘制表格及动态生成表格行
2014年08月25日 11:35:45 ⁄ Flex ⁄ 共 7341字 ⁄ 暂无评论 ⁄ 被围观 2,752次

由于项目中有统计部分，不得不绘制表格，如果是打印，直接用插件即可，但需要在打印之前在画面上显示表格预览的效果。查询了一下，Flex 可以直接绘制表格，而且很多属性和 CSS 的属性很相似，用起来很顺手。

代码：

Code   ViewPrint
  1. <?xml version="1.0"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
  3.                 xmlns:s="library://ns.adobe.com/flex/spark">  
  4.     <mx:Style>  
  5.         @namespace mx "library://ns.adobe.com/flex/mx";  
  6.           
  7.         .title {  
  8.             border-style:solid;  
  9.             background-color:#FFFFFF;  
  10.             horizontal-align:center;  
  11.             vertical-align:middle;  
  12.             font-family:"宋体";  
  13.             font-size:11;  
  14.             font-weight:bold;  
  15.         }  
  16.           
  17.         .left {  
  18.             border-style:solid;  
  19.             background-color:#FFFFFF;  
  20.             horizontal-align:left;  
  21.             vertical-align:bottom;  
  22.             padding-left:3px;  
  23.             padding-right:3px;  
  24.         }  
  25.           
  26.         .center {  
  27.             border-style:solid;  
  28.             background-color:#FFFFFF;  
  29.             horizontal-align:center;  
  30.             vertical-align:bottom;  
  31.             padding-left:3px;  
  32.             padding-right:3px;  
  33.         }  
  34.           
  35.         .right {  
  36.             border-style:solid;  
  37.             background-color:#FFFFFF;  
  38.             horizontal-align:right;  
  39.             vertical-align:bottom;  
  40.             padding-left:3px;  
  41.             padding-right:3px;  
  42.         }  
  43.     </mx:Style>  
  44.       
  45.     <mx:Grid id="myGrid" borderStyle="solid" horizontalGap="0" verticalGap="0">  
  46.         <mx:GridRow width="600" height="20">  
  47.             <mx:GridItem styleName="title" colSpan="2">  
  48.                 <s:Label text="统 计 项 目"/>  
  49.             </mx:GridItem>  
  50.             <mx:GridItem styleName="title" colSpan="4">  
  51.                 <s:Label text="月  度  统  计"/>  
  52.             </mx:GridItem>  
  53.             <mx:GridItem styleName="title" colSpan="4">  
  54.                 <s:Label text="年  度  统  计"/>  
  55.             </mx:GridItem>  
  56.         </mx:GridRow>  
  57.           
  58.         <!--        第一行     -->  
  59.         <mx:GridRow width="600" height="18">  
  60.             <mx:GridItem width="20" styleName="center">  
  61.                 <s:Label text="1"/>  
  62.             </mx:GridItem>  
  63.             <mx:GridItem width="100" styleName="left">  
  64.                 <s:Label text="检查总数"/>  
  65.             </mx:GridItem>  
  66.               
  67.             <mx:GridItem width="80" styleName="right">  
  68.                 <s:Label text="1"/>  
  69.             </mx:GridItem>  
  70.             <mx:GridItem width="80" styleName="center">  
  71.                 <s:Label text="个"/>  
  72.             </mx:GridItem>  
  73.             <mx:GridItem width="80" styleName="right">  
  74.                 <s:Label text="2"/>  
  75.             </mx:GridItem>  
  76.             <mx:GridItem width="80" styleName="center">  
  77.                 <s:Label text="个"/>  
  78.             </mx:GridItem>  
  79.               
  80.             <mx:GridItem width="80" styleName="right">  
  81.                 <s:Label text="3"/>  
  82.             </mx:GridItem>  
  83.             <mx:GridItem width="80" styleName="center">  
  84.                 <s:Label text="个"/>  
  85.             </mx:GridItem>  
  86.             <mx:GridItem width="80" styleName="right">  
  87.                 <s:Label text="4"/>  
  88.             </mx:GridItem>  
  89.             <mx:GridItem width="80" styleName="center">  
  90.                 <s:Label text="个"/>  
  91.             </mx:GridItem>  
  92.         </mx:GridRow>  
  93.     </mx:Grid>  
  94. </mx:Application>  

 

效果：

Flex中绘制表格

但有一个很让人头疼的问题就是，表格中的线很粗，原因是两个单元格的两条线不会叠在一起，而是并排的，如果把一个格子的线拿掉，则表格看起来很乱，如下：

Flex中绘制表格

目前还没找到解决方法，也就暂时画粗线了。

至于动态生成行，和 JSP 中生成行差不多，需要 NEW 一个个对象，并 AddChild 就可以了。

代码：

Code   ViewPrint
  1. <?xml version="1.0"?>  
  2.   
  3. <mx:Application borderStyle="none" xmlns:mx="http://www.adobe.com/2006/mxml">  
  4.     <mx:Script>  
  5.         <![CDATA[ 
  6.             import mx.controls.Button; 
  7.             import mx.controls.TextInput; 
  8.             import mx.controls.ComboBase; 
  9.             import mx.containers.GridItem; 
  10.             import mx.containers.GridRow; 
  11.              
  12.             private var gridRow:GridRow; 
  13.             private var i:int =0; 
  14.             private var btn:Button; 
  15.             public function addMore():void{ 
  16.                 gridRow = new GridRow(); 
  17.                 var item1:GridItem = new GridItem(); 
  18.                 var combox1:ComboBox = new ComboBox(); 
  19.                 item1.addChild(combox1); 
  20.                 var item2:GridItem = new GridItem(); 
  21.                 var text:TextInput = new TextInput(); 
  22.                 item2.addChild(text); 
  23.                 var item3:GridItem = new GridItem(); 
  24.                 var text1:TextInput = new TextInput(); 
  25.                 item3.addChild(text1); 
  26.                 var item4:GridItem = new GridItem(); 
  27.                 var text2:TextInput = new TextInput(); 
  28.                 item4.addChild(text2); 
  29.                 var item5:GridItem = new GridItem(); 
  30.                 btn= new Button(); 
  31.                 btn.addEventListener(MouseEvent.CLICK,removeGridRow); 
  32.                 btn.label='移除'+(++i); 
  33.                 item5.addChild(btn); 
  34.                  
  35.                 gridRow.addChild(item1); 
  36.                 gridRow.addChild(item2); 
  37.                 gridRow.addChild(item3); 
  38.                 gridRow.addChild(item4); 
  39.                 gridRow.addChild(item5); 
  40.                 this.temp.addChild(gridRow); 
  41.                  
  42.             } 
  43.              
  44.             public function removeGridRow(event:MouseEvent):void{ 
  45.                 this.gridRow.removeEventListener(MouseEvent.CLICK,removeGridRow); 
  46.                 var row:GridRow = event.currentTarget.parent.parent as GridRow; 
  47.                 this.temp.removeChild(row); 
  48.             } 
  49.         ]]>  
  50.     </mx:Script>   
  51.     <mx:Panel title="Grid Container Example" height="75%" width="75%"   
  52.               paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">  
  53.         <mx:Grid id="temp">  
  54.             <mx:GridRow>  
  55.                 <mx:GridItem>  
  56.                     <mx:Text text="模版设置1" width="100"/>  
  57.                 </mx:GridItem>  
  58.                 <mx:GridItem>  
  59.                     <mx:Text text="模版设置2" width="100"/>  
  60.                 </mx:GridItem>  
  61.                 <mx:GridItem>  
  62.                     <mx:Text text="模版设置3" width="100"/>  
  63.                 </mx:GridItem>  
  64.                 <mx:GridItem>  
  65.                     <mx:Text text="模版设置4" width="100"/>  
  66.                 </mx:GridItem>  
  67.                 <mx:GridItem>  
  68.                     <mx:Text text="操作" width="100"/>  
  69.                 </mx:GridItem>  
  70.             </mx:GridRow>  
  71.               
  72.             <mx:GridRow>  
  73.                 <mx:GridItem>  
  74.                     <mx:ComboBox id="a"/>  
  75.                 </mx:GridItem>  
  76.                 <mx:GridItem>  
  77.                     <mx:TextInput name="a"/>  
  78.                 </mx:GridItem>  
  79.                 <mx:GridItem>  
  80.                     <mx:TextInput name="a"/>  
  81.                 </mx:GridItem>  
  82.                 <mx:GridItem>  
  83.                     <mx:TextInput name="a"/>  
  84.                 </mx:GridItem>  
  85.                 <mx:GridItem>  
  86.                     <mx:Button label="增加" click="addMore()"/>  
  87.                 </mx:GridItem>  
  88.             </mx:GridRow>  
  89.         </mx:Grid>  
  90.     </mx:Panel>       
  91. </mx:Application>  

 

效果：

Flex动态生成表格行

要注意一点就是：如果是查询出了一个 List 集合，需要循环绘制到画面中，但在第二次查询出数据源后，需要把前一次画面中生成的行全部删除掉，否则行会一直递增并超出浏览器。

移除方法是：

Code   ViewPrint
  1. // 清除上次画面中动态生成的行  
  2. while (null != this.myGrid.getChildByName("auto")) {  
  3.     this.myGrid.removeChild(this.myGrid.getChildByName("auto"));  
  4. }  

 

所以在动态添加行的时候，需要给每行一个 name，方法是：

Code   ViewPrint
  1. gridRow = new GridRow();  
  2. gridRow.name = "auto";  

 

分享到0
返回
Avatar photo

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. MySQL 数据库生成连续日期
  2. html中可以自定义输入的select下拉列表
  3. Jframe开发的一些基本问题
  4. Flex桌面应用程序air打包
  5. Flex中Label自动截取或换行
  6. Linux系统搭建Web服务器
  7. 船舶报文系统项目之发布篇
  8. WordPress中添加置顶功能
网友神点评比亚迪G5
未来10年的10大暴富行业
码农的苦逼生活
Linux 机器间配置 SSH 免密登录
放手，也是一种幸福
逼你是因为想你
在 CentOS 上安装 JDK
Windows 10已成全球第二大操作系统

给我留言

留言无头像?


插入图片

Copyright © 2010-2024 孟郎郎 辽ICP备19011093号