SharePoint 2013 列表 - 项目的工具提示答案

【问题标题】：SharePoint 2013 List - Tooltip over ItemsSharePoint 2013 列表 - 项目的工具提示
【发布时间】：2015-01-09 22:31:39
【问题描述】：

我们拥有包含大量列的大型 SharePoint 列表。我们的用户忘记了他们正在查看哪些单元格，因为滚动后标题会消失（无法像 Excel 中那样冻结标题）。

我们想尝试向单元格项目添加工具提示，以便当它们悬停在它上面时会显示带有列名称的工具提示。

有没有人尝试过这样做？

我有以下代码，最初在加载时工作，但在用户对列表进行排序、过滤或切换到编辑模式后停止工作：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
jQuery(
function() 
{
    $('td').hover
    (
    function() 
    {
        var idx = jQuery(this).parent().children().index(jQuery(this));
        jQuery(this).attr('title',jQuery(this).parent().parent().parent().find('th').eq(idx).text());
        jQuery('div.ms-core-brandingText').html(jQuery(this).parent().parent().parent().find('th').eq(idx).text());
    }
    )
}
);                         
</script>

【问题讨论】：

标签： javascript jquery sharepoint sharepoint-2013

【解决方案1】：

您的代码停止工作，因为 SharePoint 重新加载了列表内容。这是将客户端脚本添加到 SharePoint 页面时的常见问题。

首先，您实际上应该能够渲染带有冻结标题的视图。是的，它不是开箱即用的，但有第三方数据表工具可用。

另一个选项是通过客户端渲染选项包含您的代码。这是一个广泛的话题，所以第一步可能是用谷歌搜索它。

【讨论】：

谢谢，你说得对。看起来 HTML 正在重新生成，而我的代码没有被重新应用。我将研究客户端渲染主题。我们找不到用于冻结标头的第 3 方工具 - 你碰巧知道吗？
这里有一个例子：datatables.net/extensions/fixedheader 这些工具不是特定于 SharePoint 的。

【解决方案2】：

好的，越来越接近了，使用 CSR 而不是 jQuery。这可行，但需要手动指定每个字段。正在寻找一种将其应用于视图中每个字段的方法。

<script type="text/javascript">
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        Templates: {
            Fields: {
                'Comments': {
                    'View': function (ctx) {
                        return String.format('<span title="{0}">{1}</span>', this.FieldTitle, ctx.CurrentItem.Comments);
                    }
                },
                'Name': {
                    'View': function (ctx) {
                        return String.format('<span title="{0}">{1}</span>', this.FieldTitle, ctx.CurrentItem.Name);
                    }
                }
            }
        }
    });

【讨论】：

【解决方案3】：

发生这种情况是因为在应用过滤/排序时会重新加载列表视图。

如何在 SharePoint 2013 中悬停列表项

以下函数可用于在 SharePoint 2013 中悬停列表项单元格：

function hoverListItems()
{
  $('tr.ms-itmhover td').hover(
    function() {
       var $td = $(this);
       var $th = $td.closest('table').find('th').eq($td.index());
       $td.attr('title',$th.text());
    }
  );  
}

由于在 SharePoint 2013 客户端渲染 (CSR) 是默认渲染模式，下面的示例演示了如何使用 OnPostRender 事件注册 hoverListItem 函数

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
   OnPostRender: function() { 
       hoverListItems(); 
   }
});

注意：使用指定的技术列表项悬停后也将起作用应用排序/过滤。

参考文献

Introduction to Client-Side Rendering in SharePoint 2013

【讨论】：

【解决方案4】：

工具提示解决方法：

我一直使用的解决方案是一个简单的非 html 解决方案。我只是创建一个项目的链接；插入它自己的地址（这样它就不会去任何地方）；然后在新的 LINK 选项卡下的 Description 框中键入您想要的提示。

保存页面，然后尝试将鼠标悬停在您的新链接上，瞧

希望对大家有所帮助！

【讨论】：