Flex DataGrid 标题列分隔符

Posted 2023-02-22

【中文标题】Flex DataGrid 标题列分隔符

【英文标题】：Flex DataGrid Header Column Separator

【发布时间】：2015-07-06 09:49:35

【问题描述】：

我正在使用 mx:DataGrid（在 Halo 主题中），并且在 标题 列分隔符/垂直网格线颜色方面存在一些问题。有谁知道如何自定义/更改线条颜色？

谢谢！

--萌

【参考方案1】：

Datagrid 有两种样式 horizontalSeparatorSkin 和 verticalSeparatorSkin 样式，您可以覆盖它们。看来您需要覆盖后者。

<mx:DataGrid id="grid" verticalGridLines="true" verticalSeparatorSkin="VerticalSeparatorSkin">
        <mx:columns>
            <mx:DataGridColumn dataField="lbl" />
            <mx:DataGridColumn dataField="val"/>
        </mx:columns>
    </mx:DataGrid>

现在你可以把这个类写成：

public class VerticalSeparatorSkin extends ProgrammaticSkin
    
        public function VerticalSeparatorSkin()
        
            super();
        

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        
            // draw a line at the bottom of the rectangle defined by
            // unscaledWidth and unscaledHeight
            var g:Graphics = this.graphics;
            g.clear();
            g.lineStyle(3, 0x00FF00); // change thickness / color here
            g.moveTo(0,unscaledWidth);
            g.lineTo(unscaledWidth, unscaledHeight);
        
    

这应该可以完成工作。另一种选择是自定义数据网格本身。

public class MyCustomGrid extends DataGrid
    
        public function MyCustomGrid()
        
            super();
        

        override protected function drawVerticalLine(s:Sprite, colIndex:int, color:uint, x:Number):void
        
            var contentHolder:ListBaseContentHolder = s.parent.parent as ListBaseContentHolder;
            var g:Graphics = s.graphics;
            g.lineStyle(3, color); // change the thickness here
            g.moveTo(x, 0);
            g.lineTo(x, contentHolder.height);
        
    

然后可以使用它来代替常规的DataGrid。

【讨论】：

感谢您的帮助！！