datagrid FLEX 中的不同行样式

Question

如果在数据字段中找到某个单词，我正在尝试更改数据网格中一行的字体颜色。 有没有一种简单的内联方式来做到这一点？

谢谢

Answer 1

您可以尝试使用以下代码。注意几点：

1) 如果您在数据网格中显示简单文本，请使用此方法（嗯，您也可以对其他类型的渲染执行此操作，但您也必须在其他渲染器中编写类似的代码）。

2）在这种方法中，当我们说“突出显示”时，基本上我们是在重新创建项目渲染器。所以我觉得这可能会导致一些性能下降。如果您使用的是简单的项目渲染器，我认为这不会产生太大影响关于性能。

主应用程序 mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
                creationComplete="application1_creationCompleteHandler(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var rendererFactory:ClassFactory;

            protected function btn_clickHandler(event:MouseEvent):void
            {
                setFilterWordInRenderer();
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                setFilterWordInRenderer();
            }

            private function setFilterWordInRenderer():void
            {
                if(!rendererFactory)
                    rendererFactory =  new ClassFactory(CustomItemRenderer)

                //Data for the renderer.The word to check.
                rendererFactory.properties = {filterWord:textInput.text};
                //Only set the renderers to the columns where you want this highlighting to be done.                
                col1.itemRenderer = rendererFactory;
                col2.itemRenderer = rendererFactory;
            }

        ]]>
    </mx:Script>

    <mx:TextInput id="textInput"/>
    <mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
    <mx:DataGrid id="dtg">
        <mx:dataProvider>
            <mx:XMLList id="datXML" xmlns="">
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
            </mx:XMLList>
        </mx:dataProvider>
        <mx:columns>
            <mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
            <mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

CustomItemRenderer.mxml的内容（假设和上面的mxml在同一个文件夹）

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
          color="{text.indexOf(_filterWord,0) != -1?0xFF0000:0x000000}">
    <mx:Script>
        <![CDATA[
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridListData;

            //The word to check,for font color changing.
            [Bindable]
            private var _filterWord:String;

            public function set filterWord(value:String):void
            {
                if(value!='')
                    _filterWord = value;
                else
                    _filterWord = null;
            }

            override public function set data(value:Object):void 
            {
                if(!value)
                    return;
                super.data = value;
                //Set the label text,using listdata and datafield to make the item renderer as generic as possible.
                text = data[DataGridListData(listData).dataField];
            }

        ]]>
    </mx:Script>
</mx:Label>

希望对您有所帮助。与此同时，我也会看看您是否可以以更简单的方式实现这一目标。

Answer 2

虽然 rekaszeru 的方法确实有效，但我认为将这个逻辑放在项目渲染器中更合乎逻辑。
您可以根据数据创建custom item renderer 并在那里创建setStyle("color", "...")。只是不要忘记在找不到 word 时清除颜色，因为渲染器会被重用，并且如果没有被覆盖，它将包含旧值。

Answer 3

您可以覆盖DataGrid 的drawRowBackground 方法，并检查它是否需要自定义背景。
如果是这样，请将新的背景颜色传递给此方法的 super 调用：

protected override function drawRowBackground(s:Sprite, rowIndex:int, 
    y:Number, height:Number, color:uint, dataIndex:int):void
{
    if ((dataProvider[dataIndex] as String).indexOf(someWord) >= 0)
        color = yourCustomColor;
    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}

其中someWord 是您要搜索的单词，yourCustomColor 是代表新背景颜色的uint，例如：

var yourCustomColor: uint = 0xff0000;