Using JSLink to display links list into 二 compartments in webpart section

Using JSLink to display links list into 2 compartments in webpart section

Using JSLink to render the UI of the  listview webpart

I had a require to display links list webpart into 2 compartments in links webpart section, here is the result:

 

First, I try to use jQuery to complete it, but it had something wrong when we click the next page in current list, the jQuery won't work.

So, I had to find another way to finish it. it is JSLink, that's greate.

here is the code:

(function () {
var itemCtx = {};
itemCtx.Templates = {};

itemCtx.Templates.Header = "<span></span>";
itemCtx.Templates.Item =  ItemOverrideFun ;
itemCtx.Templates.Footer =  "";
 
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 103;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
 })();
 
function ItemOverrideFun(ctx) { 
    return "<div style='padding-left:5px;width:50%;height:26px;min-width:100px;max-width:200px;float:left;'><a href='" + ctx.CurrentItem.URL + "'>" + ctx.CurrentItem['URL.desc'] + "</a></div>";
}

at last, upload the js file to display template in master page layout site page.

Note: You should notice the ListTemplateType and choose the JavaScript Display Template when upload the file.

 

More to link:http://www.learningsharepoint.com/2013/04/04/color-code-list-items-with-javascript-using-js-link-in-sharepoint-2013/

http://www.learningsharepoint.com/2013/04/01/add-task-status-indicators-in-sharepoint-2013-using-js-link/

http://www.learningsharepoint.com/2013/04/01/add-task-status-indicators-in-sharepoint-2013-using-js-link/