SharePoint 2013-将SharePoint列表视图转换为Accordion [英] SharePoint 2013-Convert SharePoint List view into Accordion

问题描述

我尝试了下面的文章，但对我来说不起作用，有人可以帮我吗?
https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e/view/Discussions 

问题-

解决方案

请使用以下代码，它可以在我的测试环境中使用.我创建了一个自定义列表，并在其中添加了多行文本字段"Description".列出.然后将下面的代码另存为Accordion.js文件，然后将其上传到Site Assets库，然后 转到列表视图，并引用JSLINK上的js.

(函数(){

    //此示例中需要jQuery库
    //如果本地不可用，则退回到从CDN路径加载jQuery
    (window.jQuery || document.write('< script src =''//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"<\/script>')) );

    //创建具有有关我们要更改的字段的上下文信息的对象，将其输出呈现
    var AccordionContext = {};
    AccordionContext.Templates = {};

    //添加模板标题时要小心，因为它会破坏默认的列表视图渲染
    AccordionContext.Templates.Header =< div class ='accordion'>" ;;
    AccordionContext.Templates.Footer =</div>";

    //添加OnPostRender事件处理程序以添加手风琴单击事件和样式
    AccordionContext.OnPostRender =手风琴OnPostRender;

    //这行代码告诉TemplateManager我们要更改项目行渲染的所有HTML
    AccordionContext.Templates.Item =手风琴模板;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionContext);

})();

//此函数提供渲染逻辑
函数corordionTemplate(ctx){
    var title = ctx.CurrentItem ["Title"];
    var description = ctx.CurrentItem ["Description"];

    //返回整个项目html
    返回'< h2>' +标题+'</h2>< div>' +说明+'</div>< br/>';
}

函数corordionOnPostRender(){
   
    //在单击手风琴标题时注册事件以折叠和展开折叠

('.accordion h2').click(function(){

( this).next().slideToggle(); }).next().hide();

Hi,

I have tried below article but it's not working for me, can anyone help me on this?
https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e/view/Discussions 

Issue-

I have uploaded the accordian.js and referenced on the JSLink. I also can see the jquery loaded but for some reason I cant figure it out why the collapse expand is not working at all. It displays the list with H2 tag the title and p tag the description. What am I missing here?

---

Vishal Goyal

解决方案

Hi,

Please use the following code, it works in my test environment. My create a custom list and add a multiple line of text field "Description" to list. Then save the code below as a accordion.js file and then upload it into Site Assets library, then go to list view and reference the js on the JSLINK.

(function () {

    // jQuery library is required in this sample
    // Fallback to loading jQuery from a CDN path if the local is unavailable
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

    // Create object that have the context information about the field that we want to change it's output render 
    var accordionContext = {};
    accordionContext.Templates = {};

    // Be careful when add the header for the template, because it's will break the default list view render
    accordionContext.Templates.Header = "<div class='accordion'>";
    accordionContext.Templates.Footer = "</div>";

    // Add OnPostRender event handler to add accordion click events and style
    accordionContext.OnPostRender = accordionOnPostRender;

    // This line of code tell TemplateManager that we want to change all HTML for item row render
    accordionContext.Templates.Item = accordionTemplate;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionContext);

})();

// This function provides the rendering logic
function accordionTemplate(ctx) {
    var title = ctx.CurrentItem["Title"];
    var description = ctx.CurrentItem["Description"];

    // Return whole item html
    return '<h2>' + title + '</h2><div>' + description + '</div><br/>';
}

function accordionOnPostRender() {
   
    // Register event to collapse and uncollapse when click on accordion header

('.accordion h2').click(function () {

(this).next().slideToggle(); }).next().hide();

这篇关于SharePoint 2013-将SharePoint列表视图转换为Accordion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！