本文讲述在SharePoint 2013 中使用JSLink 来改变列表中某个字段或view(视图)的显示方式。
SPField 有个新的属性叫做 JSLink,他可以指向一个JS脚本,二这个脚本负责实现如何显示这个字段。不仅如此,很多web part也有这个属性,比如 List View Web Parts,这样我们就可以很方便的客户化列表中某个字段或view(视图)的显示方式:
在SharePoint 2013中可以通过多种方式来设置JSLink这个属性:
1.在web part 的属性面板里面
2. 使用Field xml定义
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Field ID="{43001095-7db7-4219-9df9-b4b0f281530a}" Name="My Awesome Sample Field" DisplayName="My Awesome Sample Field" Type="Text" Required="FALSE" JSLink="/_layouts/15/Zimmergren.JSLinkSample/Awesomeness.js" Group="Blog Sample Columns"> </Field> </Elements>
using (SPSite site = new SPSite("http://tozit-sp:2015")) { SPWeb web = site.RootWeb; SPField taskPriorityField = web.Fields["Priority"]; taskPriorityField.JSLink = "/_layouts/15/Zimmergren.JSLinkSample/AwesomeFile.js"; taskPriorityField.Update(true); }
$web = Get-SPWeb http://tozit-sp:2015 $field = $web.Fields["Priority"] $field.JSLink = "/_layouts/15/Zimmergren.JSLinkSample/Awesomeness.js" $field.Update($true)
$web = Get-SPWeb http://tozit-sp:2015 $webPartPage = "/Lists/Sample%20Tasks/AllItems.aspx" $file = $web.GetFile($webPartPage) $file.CheckOut() $webPartManager = $web.GetLimitedWebPartManager($webPartPage, [System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared) $webpart = $webPartManager.WebParts[0] $webpart.JSLink = "/_layouts/15/Zimmergren.JSLinkSample/Awesomeness.js" $webPartManager.SaveChanges($webpart) $file.CheckIn("Awesomeness has been delivered")
// Create a namespace for our functions so we don't collide with anything else var zimmergrenSample = zimmergrenSample || {}; // Create a function for customizing the Field Rendering of our fields zimmergrenSample.CustomizeFieldRendering = function () { var fieldJsLinkOverride = {}; fieldJsLinkOverride.Templates = {}; fieldJsLinkOverride.Templates.Fields = { // Make sure the Priority field view gets hooked up to the GetPriorityFieldIcon method defined below 'Priority': { 'View': zimmergrenSample.GetPriorityFieldIcon } }; // Register the rendering template SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride); }; // Create a function for getting the Priority Field Icon value (called from the first method) zimmergrenSample.GetPriorityFieldIcon = function (ctx) { var priority = ctx.CurrentItem.Priority; // In the following section we simply determine what the rendered html output should be. In my case I'm setting an icon. if (priority.indexOf("(1) High") != -1) { //return "<div style='background-color: #FFB5B5; width: 100%; display: block; border: 2px solid #DE0000; padding-left: 2px;'>" + priority + "</div>"; return "<img src='/_layouts/15/images/Zimmergren.JSLinkSample/HighPrioritySmall.png' /> " + priority; } if (priority.indexOf("(2) Normal") != -1) { //return "<div style='background-color: #FFFFB5; width: 100%; display: block; border: 2px solid #DEDE00; padding-left: 2px;'>" + priority + "</div>"; return "<img src='/_layouts/15/images/Zimmergren.JSLinkSample/MediumPrioritySmall.png' /> " +priority; } if (priority.indexOf("(3) Low") != -1) { //return "<div style='background-color: #B5BBFF; width: 100%; display: block; border: 2px solid #2500DE; padding-left: 2px;'>" + priority + "</div>"; return "<img src='/_layouts/15/images/Zimmergren.JSLinkSample/LowPrioritySmall.png' /> " + priority; } return ctx.CurrentItem.Priority; }; // Call the function. // We could've used a self-executing function as well but I think this simplifies the example zimmergrenSample.CustomizeFieldRendering();
另外,还可以是用JSLink 来客户化list forms:
有兴趣的朋友可以参考:http://blog.creative-sharepoint.com/2013/06/customising-the-newform-with-jslink/