如何在Flex的mx Datagrid Row中显示工具提示？

Question

我想知道如何显示每个数据网格行的工具提示，或在工具提示中显示某些特定列的数据。

Answer 1

如果您有一个DataGrid，并且想在mouseOver上显示特定于行的数据，这是可以完成的。

第一步是为要启用此功能的每个DataGridColumn启用showDataTips属性。

其次，您需要在DataGrid本身上具有dataTipFunction函数。 因为dataTipFunction将Grid行数据作为对象传递给调用函数，所以您不需要将任何参数传递给它。 这是一个小例子，展示了如何做。

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

        import mx.collections.ArrayCollection; // this holds the grid data

        [Bindable]
        private var myData:ArrayCollection = new ArrayCollection();

        private function doInit():void {
            myData.addItem({fname:"Joe",lname:"Bloggs"});
            myData.addItem({fname:"Joe1",lname:"Bloggs"});
        }

        private function buildToolTip(item:Object):String {
            var myString:String = "";
            if(item != null) {
                myString = myString + "Firstname : " + item.fname + "\n";
                myString = myString + "Lastname : " + item.lname + "\n";
            }

            return myString;
        }
    ]]>
</mx:Script>
<mx:DataGrid id="dGrid"  dataProvider="{myData}"  visible="true" dataTipFunction="buildToolTip">
    <mx:columns>
        <mx:DataGridColumn dataField="fname" headerText="FirstName" showDataTips="true" />
        <mx:DataGridColumn dataField="lname" headerText="LastName" showDataTips="true" />
    </mx:columns>
</mx:DataGrid>
</mx:Application>

资料来源： http : //www.anujgakhar.com/2008/01/13/flex-how-to-have-tooltip-on-every-row-of-datagrid/

这是来自不同来源的另一种解释：

我使用了itemRollOver和itemRollOut事件。 在itemRollOver中，我们在行中找到对象的值，获取对象的标签，并将其设置为datagrid工具提示。 itemRollOut表现得更干净...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                dataGrid.toolTip = str;
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

来源： http : //www.flexdeveloper.eu/forums/mxml/tooltip-on-datagrid-row/

-希望有帮助

Answer 2

添加到Aarons答案中，如果您只想在文本长于列宽时显示工具提示，则可以使用以下代码（基于翻转事件示例）：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="plain">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridItemRenderer;
            import mx.events.ListEvent;
            import mx.controls.ToolTip;

            private function createToolTip(event:ListEvent):void {
                if (event.itemRenderer.measuredWidth>event.itemRenderer.width) {
                    var str:String =  DataGridItemRenderer(event.itemRenderer).data.label;
                    dataGrid.toolTip = str;
                }
            }

            private function deleteToolTip(obj:Object):void {
                dataGrid.toolTip = null;
            }

        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRollOut="deleteToolTip(event)"
            itemRollOver="createToolTip(event)"       
            >
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>