SharePoint在线“阅读更多”公告列表（时事通讯视图）的客户端呈现

-1

频繁的追猎者，但我发布的几次之一。我一直试图使用以下方法在SharePoint在线列表上实现客户端侧渲染失败： https://sharepoint.stackexchange.com/questions/151473/how-to-truncate-a-multiline-column-in-a-sharepoint-list-2013 SharePoint在线“阅读更多”公告列表（时事通讯视图）的客户端呈现

尽管这与我试图达到的最接近，但并不确切。我正在寻找一种方法来截断“新闻稿”视图中显示的多行正文列，该列可以使用“阅读更多”按钮或使用“悬停在”选项进行展开和折叠。任何帮助将不胜感激。 Example view

来源

2017-06-19 maelstromm

不幸的是通过CSR 定制风格自定义列表视图时（例如Newsletter）是越来越忽略，默认视图渲染。为了应用定制列表视图自定义样式，你可以考虑DOM操作所证明下面

注：注入Script Editor/Content Editor网络部分可以利用
自定义

例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css"> 

<style type="text/css"> 

.in.collapse+a.btn.showdetails:before 
{ 
    content:'Hide details «'; 
} 
.collapse+a.btn.showdetails:before 
{ 
    content:'Show details »'; 
} 

    </style> 

<script> 

$(function(){ 

$.each($("td.ms-formbody"),function(i){ 
    var headline = $(this).text().substring(0,200); 
    var template = String.format('<div class="span collapse-group">{0}' + 
      '<p class="collapse" id="viewdetails{2}">{1}</p>' + 
      '<a class="btn showdetails" data-toggle="collapse" data-target="#viewdetails{2}"></a>' + 
     '</div>',headline,$(this).text(),i); 
    $(this).html(template);  
}); 


}); 

</script>

结果

来源

2017-06-29 14:45:52

谢谢瓦迪姆！我会给这是一个尝试。有没有办法将它隔离到页面上的一个列表视图。我应该使用＃WebPartTitleWPQ3还是ID？还有，以指定从bootstrap使用哪个按钮类？ – maelstromm

当然！还有'webpartid'属性来标识特定的Web部件。 –

我试了一下，但没有奏效。我修复了引导js文件的链接。如果有帮助，我在线上使用SharePoint。或者，我看了一下你刚才创建的解决方案，也可以工作。（https://sharepoint.stackexchange.com/questions/115402/sharepoint-2013-add-read-more-link-in-announcement-web-part-each-list-items）。但是，它不允许我设置Web部件的ID或增加要显示的字符数。我仍然喜欢标题，修改和正文显示。 – maelstromm

SharePoint在线“阅读更多”公告列表（时事通讯视图）的客户端呈现

回答

相关问题