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

Question

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

Answer 1

如果你有一个DataGrid，并且你想要在mouseOver上显示特定于行的数据，这里是如何实现的。

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

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

<?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/

-Hope，帮助

Answer 2

添加到阿伦斯的答案，如果你想只显示工具提示文本为长于列宽然后你可以使用这个代码（基于翻转事件的例子）：

<?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>