`
zeyuphoenix
  • 浏览: 57965 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

表格(悬浮框提示)

 
阅读更多
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="ProgId" content="Word.Document"> <meta name="Generator" content="Microsoft Word 12"> <meta name="Originator" content="Microsoft Word 12"> <link rel="File-List" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"> <link rel="Edit-Time-Data" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_editdata.mso"> <!--[if !mso]> <style> v":* {behavior:url(#default#VML);} o":* {behavior:url(#default#VML);} w":* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]--><link rel="themeData" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"> <link rel="colorSchemeMapping" href="file:///C:%5CDOCUME%7E1%5Cphoenix%5CLOCALS%7E1%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"> <!--[if gte mso 9]><xml> Normal 0 false 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE </xml><![endif]--><!--[if gte mso 9]><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face {font-family:Calibri; panose-1:0 0 0 0 0 0 0 0 0 0; mso-font-alt:"Times New Roman";} @font-face {font-family:""@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal { mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; font-size:10.5pt; font-family:"Calibri","serif"; mso-bidi-font-family:"Times New Roman";} .MsoChpDefault { mso-bidi-font-family:"Times New Roman";} /* Page Definitions */ @page {} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; layout-grid:15.6pt;} div.Section1 {page:Section1;} --> </style> <!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable { mso-style-parent:""; font-size:10.5pt; font-family:"Calibri","serif";} </style> <![endif]-->

JTableToolTip提示和其它的组件提示是一样的,因为它们都是继承于Jcomponent,当我们需要为我们的单元格实现ToolTip的时候,只需要复写它的getToolTipText方法就可以了,

看看Sun官方的例子:

<!--[if gte vml 1]> <![endif]-->

       //Implement table cell tool tips.

        @Override

         public String getToolTipText(MouseEvent e) {

取得鼠标的行和列:

           java.awt.Point p = e.getPoint();

           int rowIndex = rowAtPoint(p);

           int colIndex = columnAtPoint(p);

           int ealColumnIndex = convertColumnIndexToModel(colIndex);

设置你需要显示的ToolTip,然后返回

        tip = ……;

          returntip;

同样的JTableHeader也是如此:

       protected JTableHeader createDefaultTableHeader() {

                returnnew JTableHeader(columnModel) {

                 @Override

                    public String getToolTipText(MouseEvent e) {

这样不用其它设置,JTable的基本ToolTip就实现了,它虽然比较简单,但是最大的好处是不用自己考虑定位和显示的问题,很多时候也就可以了.

关于JTable的简单ToolTip提示就算是完成了,当我们只是简单的提示的时候,只需要复写JTablegetToolTipTextsetToolTipText方法就可以了,上个例子就是这样;但是当我们需要使我们的ToolTip提示不像Sun提供的那么单调,我们就需要自己来实现了.

这时候的重点已经不在JTable上了,而在于ToolTip上面,我们可以把我们需要呈现的ToolTip实现为一个JPanel,这样就可以在它的上面放置各种组件了,设置放图标都可以,这个时候就需要实现这个ToolTipUIManager,这方面有很多开源的实现,以后有时间的话开个专题专门来介绍ToolTip,这里不写了.

对于已经实现好的我们自己的ToolTip,我们需要做的是把它注册到我们的JTable上面,再根据鼠标的位置显示它,如下图所示,它可以有Title,可以有图片,可以有正文,甚至可以再加别的组件.如下图所示:

<!--[if gte vml 1]> <![endif]-->

我们需要的是增加监听:

addMouseListener(this)

根据监听的状态处理ToolTip

    @Override

    publicvoid mouseExited(MouseEvent event) {

隐藏

    @Override

    publicvoid mousePressed(MouseEvent event) {

显示

    @Override

    publicvoid mouseMoved(MouseEvent event) {

判断状态,显示或者隐藏.

然后是判断位置:

    // display directly below or above JTable band

    location.x = screenLocation.x;

    location.y = screenLocation.y + mouseEvent.getY() + 22;

    location.x = screenLocation.x +mouseEvent.getX();

    f ((location.y + size.height) > (sBounds.y + sBounds.height)) {

              location.y = screenLocation.y - size.height;

最后是取得鼠标所在单元格的值传入显示:

    Point p = mouseEvent.getPoint();

           int row = rowAtPoint(p);

           int col = columnAtPoint(p);

           if (row == -1 || col == -1) {

              returnnull;

           }

           Object data = getValueAt(row, col);

当然此时你可以对data做变换,从而显示需要的值.

使用很简单,注册就可以了.

setActionRichTooltip(new RichTooltip());

然后是另外一种ToolTip的效果,这个是一个开源的实现,只抓张图看看就算了,和前面的实现基本类似,还比那个简单,也是UI,Timer以及位置计算.如下图,代码在open就有:

<!--[if gte vml 1]> <![endif]-->

ToolTip到这儿就算完了,但是实际使用中可能有这个问题,如下图:

<!--[if gte vml 1]> <![endif]-->

这是因为我们经过设置Renderer渲染的单元格显示值和实际值不一样了.但我们很多时候需要看到的其实不是它的真实值,而是渲染后的值,可以通过渲染的实现类把它取回来:

先取得渲染类:

 TableCellRenderer cellRenderer = table.getColumnModel().getColumn(column).getCellRenderer();

再去的渲染的控件:

 Component component = cellRenderer.getTableCellRendererComponent(table,

       table.getValueAt(row, column), false, false, row, column);

这个时候不知道这个控件是否有getText方法,通过反射判断,没有则设置为””

    String text = "";

        if (component != null) {

            for (Method method : component.getClass().getMethods()) {

                if (method.getName().equals("getText")) {

                    text = method.invoke(component).toString();

                }

            }

        }

最后效果如图:

<!--[if gte vml 1]> <![endif]-->

到此为止,所有关于JTableToolTip提示就完成了,当然我实现的都是一些基本的效果,比较复杂的效果,则需要你自己去绘制和实现ToolTip,说句简单的,技术完成了,以后就是玩色彩和审美了,做程序也就这样了,很多时候后者重要.

分享到:
评论

相关推荐

    动态淡出表格行,鼠标悬浮提示框

    标题 "动态淡出表格行,鼠标悬浮提示框" 涉及的是网页开发中的交互设计技术,特别是关于表格(Table)的动态效果处理。在网页中,表格是一种常见的数据展示方式,而动态淡出和鼠标悬浮提示框可以提升用户体验,使用户...

    vue 实现超长文本截取,悬浮框提示

    总之,通过使用Vue结合ElementUI等前端框架,可以有效实现超长文本截取及悬浮框提示的功能,从而提升Web应用的用户体验。在开发过程中,开发者需要综合考虑样式、交互逻辑和数据处理等多方面因素,确保功能的实现既...

    QTableView 鼠标移动显示提示框

    本篇文章将深入探讨如何在QTableView中实现鼠标移动时显示提示框,提供用户友好的交互体验。 首先,我们要明白QTableView本身并不直接支持鼠标悬停时显示提示框的功能。但我们可以利用QGraphicsView的underMouse()...

    vue实现element表格里表头信息提示功能(推荐)

    `el-tooltip`提供了诸如位置调整、效果设置等选项,可以方便地创建悬浮提示。在模板部分,我们创建了一个包含`el-tooltip`的`div`,并在其中插入了`i`元素作为提示图标,并绑定`messages`属性来接收提示信息: ```...

    easyui datagrid 增加鼠标悬停弹窗事件

    EasyUI的Datagrid是一个强大的表格组件,它可以显示大量数据并支持排序、分页、过滤和编辑等功能。在Web应用中,Datagrid常用于展示结构化的数据,使用户能够高效地浏览和操作信息。 2. **鼠标悬停事件**: 在...

    使用BootStrap实现悬浮窗口的效果

    Bootstrap是一款流行的前端开发框架,它提供了丰富的组件和样式,大大简化了网页的构建过程。在本例中,我们将探讨如何使用...在实际项目中,利用Bootstrap的这一特性可以快速实现交互式提示信息,提升用户体验。

    element中利用tooltip实现文字超出框悬浮显示

    Element UI 是一个流行的 Vue.js UI 框架,它提供了丰富的组件,其中包括 Tooltip 组件,用于创建具有提示信息的悬浮框。在本文中,我们将探讨如何利用 Element UI 的 Tooltip 组件实现文字超出框悬浮显示,并通过二...

    又一个很好的js控制实现动态拖动表格宽度的例子

    在这个例子中,CSS可能用于设置表格的基本样式,如边框、内填充、单元格间距等,同时也可能包含了鼠标悬浮时的特殊样式,以便用户能清楚地看到可拖动的区域。 动态改变表格宽度的技术核心在于以下几点: 1. **事件...

    jquery表格

    2. **事件绑定**:使用`.on()`方法可以轻松地绑定点击、鼠标悬浮等事件,如`$("#tableID tr").on('click', function() {...})`。 3. **样式控制**:jQuery可以配合CSS选择器修改表格样式,如`$(".highlight").css(...

    C#中datagridview使用tooltip控件显示单元格内容的方法

    在C#编程中,`DataGridView`控件是一个非常常用的组件,用于展示表格数据。当单元格内容过多,无法完全在网格内显示时,可以利用`Tooltip`控件来辅助显示这些隐藏的信息。以下是对`DataGridView`结合`Tooltip`控件在...

    基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

    在该例中,表格的id为"example1",并且为了使内容显示更加完整,会有一个元素作为提示容器,id为"showbox"。 2. **CSS样式设置**:对于提示容器"showbox",需要设置合适的样式以确保它能够正确显示。这些样式包括...

    table鼠标经过时整行变色 jquery

    在网页设计中,表格(Table)是一种常见的数据展示方式,jQuery 是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停(mouseover)到表格某一行时,实现整行颜色变化...

    QT与Echart交互生成图形化表格

    5. **事件处理与交互**: Echart提供丰富的交互功能,如点击事件、鼠标悬浮提示等。这些事件可以在JavaScript中处理,然后通过`QWebChannel`将用户的交互反馈回QT应用。 6. **实时更新**: 如果需要动态更新图表,...

    ok类库合集.rar

    5. **ok弹出提示类库**: 提供弹出框功能,可能支持不同类型的提示,如警告、确认、信息提示等,方便开发者在需要时快速集成到项目中。 6. **ok加血特效类库**: 这个名字可能暗示了某种游戏相关的特效,如角色恢复...

    Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法

    Layer.js是一个强大的弹层组件,它提供了丰富的功能,包括弹窗、提示、加载层等。在这个场景中,我们将利用其灵活性和JavaScript事件处理来创建一个优雅的用户体验。 首先,我们需要在HTML文档中设置基本结构。这里...

    报表页面2(echarts)

    2. **配置项设置**:ECharts的每个图表都有详细的配置项,包括图表类型(如'line'表示折线图,'bar'表示柱状图等)、数据、坐标轴、图例、提示框、工具箱等。通过设置这些配置项,我们可以定制图表的样式和功能。 3...

    layui实现鼠标移动到单元格上显示数据的方法

    这通常通过在一个表格中添加工具提示(tooltip)功能来实现,以达到鼠标移动到单元格上时,会有相应的提示显示出来,这能提高用户体验。 具体操作方法如下: 1. 引入Layui的JavaScript和CSS文件,确保Layui框架已...

    BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法

    弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于...

Global site tag (gtag.js) - Google Analytics