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

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/

- 希望有所帮助