加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

flex grid 画表,用来做报表

发布时间:2020-12-15 01:25:25 所属栏目:百科 来源:网络整理
导读:? 在Flex中 和表格最接近的组件就是Grid了(但是默认的方式只是用来layout,不会显示表格的边框), 把Grid拖放到容器中,输入行列数。在文件中加入如下css代码 就可以看到黑边框的表格了! mx:Style ? ? Grid{ ? ? ? ? horizontalGap:0; ? ? ? ? verticalGap:0
?

在Flex中 和表格最接近的组件就是Grid了(但是默认的方式只是用来layout,不会显示表格的边框),
把Grid拖放到容器中,输入行列数。在文件中加入如下css代码
就可以看到黑边框的表格了!

<mx:Style>
? ? Grid{
? ? ? ? horizontalGap:0;
? ? ? ? verticalGap:0;
? ? ? ? borderThickness:1;
? ? ? ? borderSides:bottom,right;
? ? ? ? borderStyle:solide;
? ? ? ? borderColor:#000000;
? ? }
? ? GridItem{
? ? ? ? borderSides:left,top;
? ? ? ? borderThickness:1;
? ? ? ? borderStyle:solid;
? ? ? ? borderColor:#000000;
? ? }
</mx:Style>

?

可以用<mx:Grid width="100%" height="100%" horizontalGap="0" verticalGap="0">
? ?? ?? ?<mx:GridRow width="100%" height="20" >
? ? ? ?? ???<mx:GridItem width="15%" borderStyle="solid" borderThickness="1" verticalAlign="middle" horizontalAlign="center">
? ? ? ?? ?? ?? ?<mx:label text="销售单位"/>
? ? ? ?? ???</mx:GridItem>
? ? ? ?? ???<mx:GridItem colSpan="3" width="85%" borderStyle="solid" borderThickness="1">
? ? ? ?? ?? ?? ?<mx:TextInput borderStyle="none" width="100%"/>
? ? ? ?? ???</mx:GridItem>
? ?? ?? ?</mx:GridRow>
? ???</mx:Grid>
就像HTML里的table一样,
GridRow 相当于行
GridItem相当于列,
再用colspan或者rowspan进行合并,达到你想要的效果

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读