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

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

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

<?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>

测试代码如下：

<?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