SlickGrid：如何在列标题中查看全文？答案

【问题标题】：SlickGrid: How to view full text in column headers?SlickGrid：如何在列标题中查看全文？
【发布时间】：2012-07-23 15:16:51
【问题描述】：

我正在使用 SlickGrid，现在，如果我的列标题很长，SlickGrid 会用省略号 (...) 将标题剪短。

我的问题是：有没有办法在鼠标悬停时查看整个文本？

顺便说一句，通过注册这个很酷的插件https://github.com/mleibman/SlickGrid/blob/master/plugins/slick.autotooltips.js，我能够为长单元格条目做到这一点：

mygrid.registerPlugin(new Slick.AutoTooltips());

这是一个使用该插件的 jsFiddle：http://jsfiddle.net/crystality/h5ZLP/1/

请注意，如果您将鼠标悬停在具有长值的单元格上，则可以查看完整条目，但对于长列标题则不会这样做。

我认为我可以编辑该插件以允许该行为。还有其他建议吗？谢谢！

【问题讨论】：

请提供一些例子。不看的话很难说
@caligula：已编辑，谢谢！此处示例：jsfiddle.net/crystality/h5ZLP/1
它应该如何工作？我只看到白色方块
这不是对您问题的直接回答，但我通过对列标题进行自动换行来处理这个问题 - 如果您有兴趣，请查看此链接：stackoverflow.com/questions/9098580/…
另外，对于您的问题，列标题有一个标题集（这一直对我有用）。在您的情况下，标题被设置为空白 - 因此没有工具提示。检查 firebug 或 chrome 开发工具中的 column-header 元素 - 你会明白我的意思。

标签： javascript jquery mouseover slickgrid

【解决方案1】：

好的 - 我明白了。在最新版本的 SlickGrid 中，似乎对在列标题上设置标题属性的方式进行了更改。以前，列的名称属性将设置为标题。现在我们需要在列定义中添加一个新参数 - 称为 toolTip。我用这个编辑了你的小提琴，现在工具提示工作正常。

http://jsfiddle.net/100thGear/6sGXx/

我像这样更改了您的列定义：

{ id: "long-val", name: "Really Really Really Long Title", 
field: "longVal", sortable:true, 
toolTip: "Really Really Really Long Title" }

请注意，您不需要 slick.autotooltips.js 来完成这项工作。这只是针对数据的工具提示。

如果这有帮助，请告诉我！

【讨论】：

另外，您知道是否有一种方法可以仅在标题很长时才显示提示？目前，它总是在鼠标悬停时显示。小细节，但只是好奇！
您可以只为那些很长的列设置工具提示参数。您也可以以编程方式执行此操作 - 也许订阅 onColumnsResized 事件并设置工具提示。只是一些想法！
@ganeshk 你能不能让你的jsFiddle 处于工作状态。

【解决方案2】：

Auto Tooltips 插件现在可以选择为标题单元格添加工具提示：

https://mleibman.github.io/SlickGrid/examples/example-autotooltips.html

建议用法：

<script src="../plugins/slick.autotooltips.js"></script>

var options = {
    explicitInitialization: true,
};

grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells: true }) );
grid.init();

【讨论】：