利用Grid制做表格

来源：互联网发布：帅哥飞机直播软件编辑：程序博客网时间：2024/04/28 21:55

在Flex中没有类似HTML的table，而DataGrid样式上有时候又难以满足我们的需要，所以只能从其它控件上想想办法，FLEX里有个做布局的控件Grid，样式很像一个平面表格，但网络线还需要做点小动作。

首先我们来写个样式：

<mx:Style>

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

这里之所以用.Grid 是为了在一个项目有多个Grid时不会影响到其它的控件

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

<mx:Style>

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

    <mx:Grid width="500" height="200" backgroundColor="#E1EEF8" styleName="Grid">
        <mx:GridRow width="100%" height="100%" backgroundColor="#D0E6F7">
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%" height="100%">
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%" height="100%" backgroundColor="#D0E6F7">
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" styleName="GridItem">
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow width="100%" height="100%">
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
            <mx:GridItem width="100%" height="100%" horizontalAlign="center" styleName="GridItem">
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>

    <mx:ApplicationControlBar dock="true">

    </mx:ApplicationControlBar>

</mx:Application>

好了，执行上面的代码，我们要的表格是不是出来了？