SharePoint 2013 列表上的简单 jQuery 在筛选后停止工作答案

【问题标题】：Simple jQuery on SharePoint 2013 list stops working after filteringSharePoint 2013 列表上的简单 jQuery 在筛选后停止工作
【发布时间】：2023-03-06 01:49:01
【问题描述】：

我有一点 jQuery 添加到 SharePoint 页面，它为列表中的几个表格单元格着色。当页面加载时它可以完美运行，但是当列表被过滤时，代码会停止。过滤列表后，我需要做什么才能使其正常工作？

$(document).ready(function(){
$('table.red').closest('td').addClass('redBG');
$('.yellow').closest('td').addClass('yellowBG');

});

【问题讨论】：

标签： jquery sharepoint sharepoint-2013

【解决方案1】：

为此使用 SharePoint 客户端渲染。这里有一些 PnP 的教程：https://github.com/SharePoint/PnP/tree/dev/Samples/Branding.ClientSideRendering 但你也可以搜索谷歌。

代码：

(function () {
    if (typeof SPClientTemplates === 'undefined')
        return;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: [
          function (ctx) { DoStuff(ctx); },
        ]
    });
})();

function DoStuff(ctx) {
    $('table.red').closest('td').addClass('redBG');
    $('.yellow').closest('td').addClass('yellowBG');
}

将此用作外部 js 文件，并在 ListViewWebPart 的 JSLINK 属性上添加指向该文件的链接，以显示您的列表数据。

您的OnPostRender 函数将在过滤和分页时触发。

【讨论】：

【解决方案2】：

这适用于数据表视图中的列表，但为了使其在过滤后在标准视图和数据表中工作，我必须包含这两个函数。

     (function () {
        if (typeof SPClientTemplates === 'undefined')
        return;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: [
          function (ctx) { DoStuff(ctx); },
        ]
      });
      })();

     function DoStuff(ctx) {
       $('table.red').closest('td').addClass('redBG');
       $('.yellow').closest('td').addClass('yellowBG');
     }
  $(document).ready(function(){
   $('table.red').closest('td').addClass('redBG');
   $('.yellow').closest('td').addClass('yellowBG');
 });

【讨论】：