Question

根据一些规则，我希望在DataGrid中遍历整行。有可能吗？

Answer 1

最有效的方法是使用自定义项目渲染器，其中覆盖OnUpdateDisplay函数，使用图形对象在数据网格项的标签之间绘制一条水平线，基于在布尔参数上。

如果你愿意的话，我可以为标签写下这样的内容，但是你必须弄清楚使其适用于Datagrid项目组件的内部结构。

如果您要我粘贴标签示例，请与我们联系。

编辑（粘贴示例）

创建一个新的flex项目，添加一个扩展label的新类。该类的名称为 StrikeThroughLabel 。请将此设置为现在的默认包（即将包裹字段留空）

    package
{
    import mx.controls.Label;

    public class StrikeThroughLabel extends Label
    {
        private var isStriked:Boolean = false;

        public function StrikeThroughLabel()
        {
            super();
        }

        public function set striked(aIsStriked:Boolean):void{
            isStriked =  aIsStriked;
            this.updateDisplayList(this.width, this.height);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(isStriked){
                graphics.lineStyle(1,0x0000FF,1,false,"normal",null,null,3.0);
                graphics.lineTo(unscaledWidth,unscaledHeight);
            }else{
                graphics.clear();
            }
        }
    }
}

完成后，转到main.mxml并使用mxml后面的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="windowedapplication1_creationCompleteHandler(event)"
                        xmlns:local="*">
    <local:StrikeThroughLabel id="strikeThrough" text="Hello" x="129" y="128"/>
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;


            private var isLabelStriked:Boolean = false;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                //this.strikeThrough.striked = true;    
            }


            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                isLabelStriked = !isLabelStriked;
                this.strikeThrough.striked = isLabelStriked;
            }

        ]]>
    </mx:Script>
    <mx:Button click="button1_clickHandler(event)" id="myButton" label="Toggle"/>
</mx:WindowedApplication>

上面显示了一个按钮和一个标签，点击按钮切换标签上的删除线。请注意，现在直播是对角线的，但是只需要进行一些调整就可以获得一条横线穿透。

Answer 2

我不确定这个是否有帮助，但只有这一点出现在我的脑海中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var stepsObjs:ArrayCollection = new ArrayCollection();
        private function init():void
        {
            stepsObjs.addItem(new CObj(100,100,true));
            stepsObjs.addItem(new CObj(700,800,false));
        }

    ]]>
</mx:Script>

<mx:DataGrid id="dg" dataProvider="{stepsObjs}" click="{dg.selectedItem.strike = !dg.selectedItem.strike}" editable="false">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Canvas width="100%" 
                        height="100%" 
                        horizontalScrollPolicy="off" 
                        verticalScrollPolicy="off">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void {
                                    super.data = value;
                                }
                            ]]>
                        </mx:Script>
                        <mx:TextArea text="{data.x}" borderStyle="none" editable="false"/>
                        <mx:HRule strokeColor="red" width="100%" visible="{data.strike}" y="{this.height/2}"/>
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Canvas width="100%" 
                        height="100%" 
                        horizontalScrollPolicy="off" 
                        verticalScrollPolicy="off">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void {
                                    super.data = value;
                                }
                            ]]>
                        </mx:Script>
                        <mx:TextArea text="{data.y}" borderStyle="none" editable="false"/>
                        <mx:HRule strokeColor="red" width="100%" visible="{data.strike}" y="{this.height/2}"/>
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

    </mx:columns>
</mx:DataGrid>  
</mx:Application>

CObj Class

package
{
    [Bindable]  
    public class CObj
    {
        public function CObj(x:Number , y:Number , str:Boolean)
        {
            this.x = x;
            this.y = y;
            this.strike = str;

        }
        public var x:Number;
        public var y:Number;
        public var strike:Boolean;

    }
}

DataGrid中的Strike-through

2 个答案: