使用JSLink格式化通知 [英] Announcements formatting with JSLink

问题描述

寻找2013年SharePoint格式和公告列表的方向，看起来像这样

解决方案

您好，

您可以找到适合此要求的jQuery库。

以下是有关如何使用jQuery库Accordion进行参考的演示。

https://jqueryui.com/accordion/

下载jQuery和jqueryui（手风琴在此库中定义）并上传到SiteAssets库。

https://c ode.jquery.com/jquery-1.12.4.js

https://code.jquery.com/ui/1.12.1/ jquery-ui.js

使用以下脚本创建accordionviewtemplate.js（渲染逻辑CSR，当你使用其他jQuery库时，相应地更新）。

代码是从
https://gist.github.com/vgrem/5383868 ，根据我的测试，我几乎没有更新。

（function（）{
 loadCss（'http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/ redmond / jquery-ui.css'）; 
函数OnAccordionViewPostRender（renderCtx）{
 jQuery（function（）{

.getScript（_spPageContextInfo.webAbsoluteUrl +" /SiteAssets/jquery-ui.js"）
.done（function（script，textStatus）{
jQuery（&＃; accordionFAQ"）。acco rdion（）;
}）;

}）;
}

函数loadCss（url）{
var link = document.createElement（'link'）;
link.href = url;
link.rel ='stylesheet';
document.getElementsByTagName（'head'）[0] .appendChild（link）;
}

函数OnAccordionViewPreRender（renderCtx）{
}

函数RenderAccordionViewBodyTemplate（renderCtx）{
var listData = renderCtx.ListData;
if（renderCtx.Templates.Body ==''）{
返回RenderViewTemplate（renderCtx）;
}
var accordionHtml ='';

accordionHtml ='< div id =" accordionFAQ">';
for（listData.Row中的var idx）{
var listItem = listData.Row [idx];
accordionHtml + ='< h3>';
accordionHtml + = listItem.Title;
accordionHtml + ='< / h3>';
accordionHtml + ='< div>';
accordionHtml + = listItem.Body;
accordionHtml + ='< / div>';
}

accordionHtml + ='< / div>';


返回accordionHtml;
}


function _registerAccordionViewTemplate（）{

var accordionViewContext = {};

//accordionViewContext.BaseViewID ='Accordion';
accordionViewContext.Templates = {};
accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
accordionViewContext.OnPreRender = OnAccordionViewPreRender;
accordionViewContext.OnPostRender = OnAccordionViewPostRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides（accordionViewContext）;
}
ExecuteOrDelayUntilScriptLoaded（_registerAccordionViewTemplate，'clienttemplates.js'）;

}）（）;

设置列表视图JSLink属性为：

~sitecollection / SiteAssets / jquery-1.12.4.js | ~sitecollection / SiteAssets / jquery-ui.js | ~sitecollection / SiteAssets / accordionviewtemplate.js

示例结果：

最好的问候，

利

Looking for direction on formatting and Announcements list in 2013 SharePoint to look like this

解决方案

Hi,

You could find proper jQuery library for this requirement.

Here is demo about how to use jQuery library Accordion for your reference.

https://jqueryui.com/accordion/

Download jQuery and jqueryui(accordion is defined in this library) and upload to SiteAssets library.

https://code.jquery.com/jquery-1.12.4.js

https://code.jquery.com/ui/1.12.1/jquery-ui.js

Create accordionviewtemplate.js with below script( the render logic of CSR, when you use other jQuery library, update accordingly).

The code is referenced from https://gist.github.com/vgrem/5383868 , I did little update based on my testing.

(function () {
   loadCss('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css');
   function OnAccordionViewPostRender(renderCtx) {     
       jQuery(function () {

.getScript(_spPageContextInfo.webAbsoluteUrl+"/SiteAssets/jquery-ui.js") .done(function (script, textStatus) { jQuery("#accordionFAQ").accordion(); }); }); } function loadCss(url){ var link = document.createElement('link'); link.href = url; link.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(link); } function OnAccordionViewPreRender(renderCtx) { } function RenderAccordionViewBodyTemplate(renderCtx) { var listData = renderCtx.ListData; if (renderCtx.Templates.Body == '') { return RenderViewTemplate(renderCtx); } var accordionHtml =''; accordionHtml = '<div id="accordionFAQ">'; for (var idx in listData.Row) { var listItem = listData.Row[idx]; accordionHtml += '<h3>'; accordionHtml += listItem.Title; accordionHtml += '</h3>'; accordionHtml += '<div>'; accordionHtml += listItem.Body; accordionHtml += '</div>'; } accordionHtml += '</div>'; return accordionHtml; } function _registerAccordionViewTemplate() { var accordionViewContext = {}; //accordionViewContext.BaseViewID = 'Accordion'; accordionViewContext.Templates = {}; accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate; accordionViewContext.OnPreRender = OnAccordionViewPreRender; accordionViewContext.OnPostRender = OnAccordionViewPostRender; SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionViewContext); } ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js'); })();

Set list view JSLink property as:

~sitecollection/SiteAssets/jquery-1.12.4.js|~sitecollection/SiteAssets/jquery-ui.js|~sitecollection/SiteAssets/accordionviewtemplate.js

Sample result:

Best Regards,

Lee

这篇关于使用JSLink格式化通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！