Question

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

Answer 1

如果您有一个DataGrid并且想要在mouseOver上显示行特定数据，可以采用以下方法。

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

其次，您需要在DataGrid本身上拥有dataTipFunction函数。因为dataTipFunction将作为Object的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>

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

2 个答案: