DataGrid header显示tooltip

最新推荐文章于 2024-11-04 21:00:19 发布

最新推荐文章于 2024-11-04 21:00:19 发布 · 450 阅读

文章标签：

#javascript #ViewUI

flex 同时被 3 个专栏收录

117 篇文章

订阅专栏

ActionScript3

52 篇文章

订阅专栏

Flash

50 篇文章

订阅专栏

本文介绍如何在Flex的DataGrid组件中设置列头的提示信息和实现换行功能，适用于列名较长而实际值较短的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时需要在DataGrid的header上显示提示信息，例如列名比较长，但是实际值比较短这就可以使用列头的tooltip，当然也可以列头换行。

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/displaying-tool-tips-in-a-flex-datagrid-controls-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="xmlDP">
        <nodes>
            <node col1="One.1" col2="One.2" />
            <node col1="Two.1" col2="Two.2" />
            <node col1="Three.1" col2="Three.2" />
            <node col1="Four.1" col2="Four.2" />
            <node col1="Five.1" col2="Five.2" />
            <node col1="Six.1" col2="Six.2" />
            <node col1="Seven.1" col2="Seven.2" />
            <node col1="Eight.1" col2="Eight.2" />
            <node col1="Nine.1" col2="Nine.2" />
        </nodes>
    </mx:XML>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlDP.node}"
            width="300"
            height="200">
        <mx:columns>
            <mx:DataGridColumn dataField="@col1"
                    headerText="The quick brown fox jumped over the lazy dog"
                    headerRenderer="mx.controls.Label" />
            <mx:DataGridColumn dataField="@col2"
                    headerText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
                    headerRenderer="mx.controls.Label" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

注：以上列头的提示信息内容是headText的信息，如果想修改tooltip的提示信息，那就需要自定义一个headRenderer。