JavaScript 恢复 table 后格式丢失

Question

我将以下代码应用于 SharePoint 列表。我正在用 KPI 替换第二列中的文本。一切都很好，直到在页面上调用另一个脚本（如求助列）。在页面上的任何其他代码被调用后如何重新运行我的脚本？

function updateTableKPIs() {
var prtbl = document.getElementById('{EF4B2750-DD8E-4A81-BFB9-7DC4CD29441A}-{EB96600B-725C-4C9B-B595-BAF51F6CAA21}');
var tbllen = prtbl.rows.length;
    for(var i=1; i < tbllen; i++){
        var level = '';
        var level = prtbl.rows[i].cells[2].innerHTML;
        var pjstatus = '';
        switch(level){
            case 'In Progress':
                pjstatus = 'green';
                break;
            case 'Off Track':
                pjstatus = 'firebrick';
                break;  
            case 'Completed':
                pjstatus = 'steelblue';
                break;                  
            default:
                pjstatus = 'silver';
        }
        prtbl.rows[i].cells[2].innerHTML = '<div style="background-color:' + pjstatus + ';height:20px;width:20px;border-radius:50px;margin:auto;"></div>';

    }
}

window.addEventListener('load', updateTableKPIs);

示例 - 对标题列进行排序前后：

Answer 1

我能够解决这个问题。我运行浏览了以下有关 SharePoint 中客户端呈现的文章。 Andrei Markeev 在概述如何使用 CSR 方面做得非常出色。 SharePoint 2013 Client Side Rendering: List Views

下面是我更新的代码。希望其他人也可以使用它，如果他们想在他们的列表中使用 KPI。

function updateTableKPIs() {
var prtbl = document.getElementById('{EF4B2750-DD8E-4A81-BFB9-7DC4CD29441A}-{EB96600B-725C-4C9B-B595-BAF51F6CAA21}');
var tbllen = prtbl.rows.length;
    for(var i=1; i < tbllen; i++){
        var level = '';
        var level = prtbl.rows[i].cells[2].innerHTML;
        var pjstatus = '';
        switch(level){
            case 'In Progress':
                pjstatus = 'green';
                break;
            case 'At Risk':
                pjstatus = 'orange';
                break;              
            case 'Off Track':
                pjstatus = 'firebrick';
                break;  
            case 'Completed':
                pjstatus = 'steelblue';
                break;  
            case 'Backlog':
                pjstatus = 'silver';
                break;                  
            default:
                pjstatus = '';
        }
        prtbl.rows[i].cells[2].innerHTML = '<div style="background-color:' + pjstatus + ';height:20px;width:20px;border-radius:50px;margin:auto;"></div>';

    }
}

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
        updateTableKPIs();
  }
});

JavaScript 恢复 table 后格式丢失

JavaScript formatting lost when table is resorted

javascript

sharepoint