SharePoint 2016列表如何按Status字段值条件高亮行或单元格？

Great question! SharePoint 2016 doesn’t have the user-friendly, built-in conditional formatting that modern SharePoint (Online/2019+) offers out of the box, but there are two reliable ways to achieve row or cell highlighting based on your Status column values.

Method 1: Use JSLink (Client-Side Rendering) #

This is the most flexible approach—no need to mess with complex view edits, just a bit of JavaScript and CSS.

Step-by-Step Implementation #

1. Create the script file:
   Make a new file named StatusHighlight.js with the following code. It targets the Status column, applies cell-specific styles, and adds a class to the entire row if you want full-row highlighting:

   (function () {
       var statusFieldCtx = {};
       statusFieldCtx.Templates = {};
       // Target the "Status" field for custom rendering
       statusFieldCtx.Templates.Fields = {
           'Status': { 'View': StatusFieldViewTemplate }
       };
   
       function StatusFieldViewTemplate(ctx) {
           var statusValue = ctx.CurrentItem.Status;
           var cellClass = '';
           var rowClass = '';
   
           // Map status values to CSS classes
           switch(statusValue) {
               case 'initial':
                   cellClass = 'status-initial';
                   rowClass = 'row-initial';
                   break;
               case 'in progress':
                   cellClass = 'status-in-progress';
                   rowClass = 'row-in-progress';
                   break;
               case 'completed':
                   cellClass = 'status-completed';
                   rowClass = 'row-completed';
                   break;
               case 'awaiting developer resource':
                   cellClass = 'status-awaiting';
                   rowClass = 'row-awaiting';
                   break;
               default:
                   break;
           }
   
           // Add class to the entire row (remove this if you only want cell highlighting)
           ctx.CurrentItem.RowAttrs = { 'class': rowClass };
   
           // Return the status value wrapped in styled span
           return '<span class="' + cellClass + '">' + statusValue + '</span>';
       }
   
       // Register the template override
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFieldCtx);
   })();
   

2. Add CSS styles:
   Create a StatusHighlight.css file with your desired colors. You can either embed this in the JS file or add it via a Content Editor Web Part later:

   /* Cell highlighting */
   .status-initial { background-color: #ffcccc !important; }
   .status-in-progress { background-color: #fff3cd !important; }
   .status-completed { background-color: #d4edda !important; }
   .status-awaiting { background-color: #cce5ff !important; }
   
   /* Full row highlighting */
   .row-initial { background-color: #ffcccc !important; }
   .row-in-progress { background-color: #fff3cd !important; }
   .row-completed { background-color: #d4edda !important; }
   .row-awaiting { background-color: #cce5ff !important; }
   

3. Upload files to Site Assets:
   Upload both StatusHighlight.js and StatusHighlight.css to your site’s Site Assets library.

4. Link the script to your list view:

   • Go to your SharePoint list, open the view you want to modify.
   • Click Modify View (top-right corner).
   • Scroll down to the JS Link field, enter the relative URL of your script, e.g., ~sitecollection/SiteAssets/StatusHighlight.js.
   • Save the view.

5. Add CSS to the page:

   • Edit the list view page, add a Content Editor Web Part.
   • Edit the web part, set the content link to your StatusHighlight.css file, then save.

Method 2: Modify View XSLT with SharePoint Designer #

If you’re comfortable with SharePoint Designer, you can directly edit the view’s XSLT to apply conditional styles.

Step-by-Step Implementation #

1. Open SharePoint Designer and connect to your site.
2. Navigate to your list, right-click the view you want to modify, and select Edit in Advanced Mode.
3. Find the row template:
   Look for the <tr> tag that defines the list rows (usually inside a template named RowView).
4. Add conditional row classes:
   Insert this XSLT inside the <tr> tag to apply classes based on the Status value:

   <xsl:attribute name="class">
       <xsl:choose>
           <xsl:when test="@Status='initial'">row-initial</xsl:when>
           <xsl:when test="@Status='in progress'">row-in-progress</xsl:when>
           <xsl:when test="@Status='completed'">row-completed</xsl:when>
           <xsl:when test="@Status='awaiting developer resource'">row-awaiting</xsl:when>
           <xsl:otherwise></xsl:otherwise>
       </xsl:choose>
   </xsl:attribute>
   

5. Add CSS:
   Use the same CSS from Method 1, added via a Content Editor Web Part on the view page.
6. Save the view and refresh your list page to see the changes.

Key Notes #

• Permissions: You’ll need edit permissions on the list and access to Site Assets (or SharePoint Designer) to implement these changes.
• Style Priority: Use !important in your CSS to ensure your custom styles override SharePoint’s default formatting.
• Flexibility: JSLink is generally easier to maintain if you need to update status values or styles later, since you just edit the script file instead of reworking XSLT.

内容的提问来源于stack exchange，提问作者Philayyy