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/