What is best and easiest way Custom list formatting in SharePoint 2013?

Question

There are several ways for custom list formatting in SharePoint 2013?

What is best and easiest way to format a Custom list in SharePoint 2013?

Answer 1

You can use JSLinks to format your custom list. Using JSLink create a JS file, and then edit the webpart properties to reference it.

Here is an example which display the list items in an accordion view

// function to process an accordion item..
window.COB = window.COB || {};
window.COB.accordionItem = {
    customItemHtml: function (ctx) {
        var accordionItemHtml = "<h3>" + ctx.CurrentItem.Title + "</h3>";
        accordionItemHtml += "<div>" + ctx.CurrentItem.AccordionItemDescription + "</div>";
        return accordionItemHtml;
    }
};

// anonymous self-executing function to setup JSLink templates on page load..
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<div id=\"accordion\">";
    overrideCtx.Templates.Item = window.COB.accordionItem.customItemHtml;
    overrideCtx.Templates.Footer = "</div>";

    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 11000;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

$(document).ready(function () {
    // It seems SharePoint inserts a script tag in an inconvenient place that breaks jQuery UI's accordion, so let's remove it! 
    // (N.B. further testing recommended for production)..
    $("#accordion").find('#scriptBodyWPQ2').remove();

    $("#accordion").width('70%');
    $("#accordion").accordion();
});