如果我们隐藏DataGrid的表头（showHeader = false）并且dataProvider没有数据的话，表格的列垂直分隔线将不会显示，这个列垂直分隔线只有在dataProvider有数据才显示（或者没数据但showHeader=ture也显示）。

这是因为在隐藏表头的时，DataGrid的列垂直分隔线绘制是基于dataGrid的listData属性，当表头显示时，该listData的row 0指向表头数据列，也就是通过遍历listData的第一行数据来绘制列垂直分隔线，所以隐藏表头时并且dataProvider没有数据时，就不能绘制列垂直分隔线了。

要解决这个问题，需要扩展DataGrid，重载drawLinesAndColumnBackgrounds方法，遍历列数组而不是listData来绘制列垂直分隔线。

[xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[

            import mx.core.UIComponent;

            override protected function drawLinesAndColumnBackgrounds():void {
                super.drawLinesAndColumnBackgrounds();
                var lineCol:uint = getStyle("verticalGridLineColor");
                var lines:Sprite = Sprite(listContent.getChildByName("lines"));
                var cols:Array = columns;
                var n:int = cols.length;
                var xx:int = 0;
                for (var i:int = 0; i < n; i++)
                {
                    xx += cols[i].width;
                    drawVerticalLine(lines, i, lineCol, xx);
                }
            }
        ]]>
    </mx:Script>
</mx:DataGrid>

测试代码如下：

[bash]
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:eshangrao="com.eshangrao.lib.control.*">

	<mx:XMLList id="foo">
		<data name="feiy" phone="137*******" email="eshangrao@gmail.com" />
		<data name="feiy2" phone="137*******" email="eshangrao@gmail.com" />
		<data name="feiy3" phone="137*******" email="eshangrao@gmail.com" />
	</mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="DataGrid control with three rows"/>
		  <mx:DataGrid  showHeaders="false" width="100%" height="100%"  dataProvider="{foo}" verticalGridLines="true">
            <mx:columns>
            	<mx:DataGridColumn dataField="@name" headerText="Name" />
					<mx:DataGridColumn dataField="@phone" headerText="Phone" />
					<mx:DataGridColumn dataField="@email" headerText="Email" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label width="100%" color="blue"
            text="DataGrid control with no row"/>
        <mx:DataGrid  showHeaders="false" width="100%" height="100%" verticalGridLines="true">
            <mx:columns>
            	<mx:DataGridColumn dataField="name" headerText="Name" />
					<mx:DataGridColumn dataField="phone" headerText="Phone" />
					<mx:DataGridColumn dataField="email" headerText="Email" />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label width="100%" color="blue"
            text="Custom DataGrid control with no row"/>
        <eshangrao:FixedVLineDataGrid id="dg" showHeaders="false" width="100%" height="100%" rowCount="5" verticalGridLines="true">
            <eshangrao:columns>
            	<mx:DataGridColumn dataField="name" headerText="Name" />
					<mx:DataGridColumn dataField="phone" headerText="Phone" />
					<mx:DataGridColumn dataField="email" headerText="Email" />
            </eshangrao:columns>
        </eshangrao:FixedVLineDataGrid>

    </mx:Panel>
</mx:Application>

查看示例|下载源码

原文：Drawing vertical lines in the datagrid when showHeader = false and dataProvider is empty