SMART datagrid v.1 > Examples

[ grids ver.1.3.5]   Back  Forward

Tooltip  Example

包含数据单元格在内,如果移动鼠标至页眉、页脚、概述单元格上方并保持一定时间时,将会显示工具提示。 另外,可以使用html并根据实际情况,构成显示在工具提示的内容。 

如果需要显示工具提示,则首先需要将DisplayOptions.showTooltip指定为true。 而且,需要在各个区域模块的tooltipCallback属性中,指定返回html内容的回调函数。 

 

Grid - 1
rows

各个区域具有返回html工具提示内容的回调属性。 

GridHeader.tooltipCallbackGridFooter.tooltipCallbackHeaderSummary.tooltipCallbackGridBody.tooltipCallback

而且,数据单元格可以为各个列指定ValueColumn.tooltipCallback,并且这个属性优先于GridBody.tooltipCallback。 

Code -1
    grid.setOptions({
        footer: {
            tooltipCallback: function (column, value) {
                if (!isNaN(value)) {
                    var grid = column.grid();
                    var fld = column.dataIndex();
                    return '<span style="text-decoration:underline;">' + column.header().displayText() + '</span><br>' +
                        '合计: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'sum')) + '</b><br>' +
                        '平均: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'avg')) + '</b>';
                }
            }  
        },
    });

DisplayOptions.tooltipDelay: ms. 在当前单元格中,显示工具提示之前的等待时间。 

DisplayOptions.tooltipDuration: ms. 显示工具提示的期间。 如果移动至其他单元格,就会消失。 

工具提示视图的背景颜色及基本字体等,可以通过DisplayOptions.tooltipStyles进行指定, 或在GridBase.loadStyles中,通过tooltip区域进行设置。 

   

数据单元格可以在单元格渲染器级别,通过showTooltip属性指定是否显示工具提示, 而这时,GridBody.tooltipCallbackValueColumn.tooltipCallback就会被忽视。 请参考链接单元格渲染器例题。 

查看源代码 JSP 

See Also
HeaderSummary
ColumnFooter
SummaryMode
getSummary
Examples
链接单元格渲染器