如何在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>