Question

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

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

}）;

Answer 1

为此使用SharePoint Client Side Rendering。这里有一些来自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函数将在过滤和分页时触发。

Answer 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');
 });

SharePoint 2013列表上的简单jQuery在过滤后停止工作

2 个答案: