DataGrid 中的删除线

Question

给定一些规则，我想删除 DataGrid 中的整行。是否可以？

Answer 1

实现这项工作的最可靠的方法是使用自定义项目渲染器，其中重写 OnUpdateDisplay 函数，您使用图形对象基于布尔值在数据网格项目的标签之间绘制一条水平线范围。

如果您愿意，我可以为标签写下类似的内容，但您必须弄清楚使其与 Datagrid 项目组件一起工作的内部原理。

如果您希望我粘贴标签示例，请告诉我。

编辑（粘贴示例）

创建一个新的flex项目，添加一个扩展标签的新类。该类的名称是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 类

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;

    }
}