是否可以将显示列表中的单元格悬停以显示其全部内容? [英] Can a cell in a displayed list be hovered to show its full contents?

问题描述

我有一个显示的列表，其中最后一列(称为注释")是多行值.它通常很长.屏幕截图:

I have a displayed list in which the last column (called Notes) is a multi-line value. It is often quite lengthy. Screenshot here:

i.imgur.com/cr6RpXM.png

该屏幕截图仅示出了一行，但是该行是高"的.只是因为注释字段.想象一下多行列表的样子.太高，垂直滚动太多.

以某种方式使Notes单元可单击会很好.单击该单元格(或只是将鼠标悬停)，您将获得一个带有该单元格全文的覆盖图.也许单元格内容可以缩写(或取消)，所以该行看起来不会太高 就像这个屏幕截图:

i.imgur.com/cr6RpXM.png

This screenshot shows only one row, but the row is "tall" just because of the notes field. Imagine what a multi-row list looks like. Too tall, too much vertical scrolling.

It would be nice to somehow make the Notes cells clickable. Click the cell (or maybe just hover) and you'd get an overlay with the full text of the cell. Perhaps the cell contents could be abbreviated (or eliminated) and so the row would be not-too-tall, looking like this screenshot:

i.imgur.com/UypcIEt.png

这可能吗?

i.imgur.com/UypcIEt.png

Is this possible?

如果无法找到确切的解决方案，请随时提出替代方案.

If this exact solution is not possible, feel free to suggest an alternative.

那是:我不需要覆盖层.我只需要一种不让冗长的注释字段强制行太高的方法，同时仍然为用户提供一种在需要时查看详细内容的方法.

That is: I don't REQUIRE an overlay. I just need a way to NOT let the verbose notes field force the row to be too tall, while still offering the user a way to see the verbose contents when needed.

推荐答案

我们可以使用客户端渲染(JSLINK)来实现，将以下代码添加到脚本编辑器Web部件中.

We can use Client Side Rendering(JSLINK) to achieve it, add the following code into script editor web part.

<script type="text/javascript">
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'Note': { 'View': showMoreText }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
 
function showMoreText(ctx) {
    var note=ctx.CurrentItem["Note"];
	var regex = /(<([^>]+)>)/ig;
	note= note.replace(regex, "");
	var newNote = note;
	if (note && note.length >= 20)
	{
	    newNote = note.substring(0, 20) + " ...";
	}
	return "<span title='" + note + "'>" + newNote + "</span>";
}
</script>

最好的问候，

丹尼斯

这篇关于是否可以将显示列表中的单元格悬停以显示其全部内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！