O365 SharePoint Online中的颜色状态指示器

时间:2018-01-09 12:34:25

标签: sharepoint-2013

我正在使用 O365 SharePoint Online 平台,SharePoint列出了所有项目视图中的约300个项目。对于前30个项目文本到Html Javascript函数成功将文本代码转换为Html并以HTML颜色格式显示状态,但是当我尝试选择接下来的31个项目并继续使用分页时,函数执行此操作无法转换Html并仅显示文本代码。我还将计算的列值类型更改为" Number"获取要在列表视图中呈现的HTML。但尚未改变。有没有人愿意让代码变得简单易用?以下是O365平台中使用的Text to HTML代码。

<script type="text/javascript">
function TextToHTML(NodeSet, HTMLregexp) {
var CellContent = "";
var i=0;
while (i < NodeSet.length){
try {
CellContent = NodeSet[i].innerText || NodeSet[i].textContent;
if (HTMLregexp.test(CellContent)) {NodeSet[i].innerHTML = CellContent;}
} 
catch(err){}
i=i+1;
}
}

// Calendar views
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);

// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);

// This function is call continuesly every 100ms until the length of the main field changes
// after which the convert text to HTML is executed.
//
var postElemLength = 0;
function PostConvertToHtml() 
{
     if (postElemLength == document.getElementsByTagName("TD").length)
     {
          setTimeout(PostConvertToHtml,100);
     }
     else
     {
          var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
          TextToHTML(document.getElementsByTagName("TD"),regexpTD);
     }
}

// Grouped list views
ExpGroupRenderData = (function (old) {
    return function (htmlToRender, groupName, isLoaded) {

    var result = old(htmlToRender, groupName, isLoaded);
    var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
    TextToHTML(document.getElementsByTagName("TD"),regexpTD);

    // start the periodic callback to check when the element has been changed
    if(isLoaded == 'false')
        {
        postElemLength = document.getElementsByTagName("TD").length;
        setTimeout(PostConvertToHtml,100);
        }
    };
})(ExpGroupRenderData);

// Preview pane views
if (typeof(showpreview1)=="function") {
showpreview1 = (function (old) {
    return function (o) {
    var result = old(o);
    var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
    TextToHTML(document.getElementsByTagName("TD"),regexpTD);
    };
})(showpreview1);
}</script> 

以下是生成的文本代码,需要将其转换为计算列中使用的Html。感谢。

=IF([Trend]="Cancelled","DarkGray",IF([Trend]="Completed","DodgerBlue",IF([Trend]="Declining","DarkOrange",IF([Trend]="Improving","ForestGreen",IF([Trend]="No Change","ForestGreen",IF([Trend]="Not Started","White",IF([Trend]="On Hold","DarkGray","")))))))

和..

="<div style='position:relative;display:inline-block;width:100%;'>
    <div style='width:100%;display:inline-block;text-align:center;border:1px solid "&[VPN provisioning_Clr]&";position:absolute;color:"&[VPN provisioning_Clr]&";'> "&[VPN provisioning]&"
    </div>
    <div style='display:inline-block;width: 100%;background-color:"&[VPN provisioning_Clr]&";text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;'>"&[VPN provisioning]&"
    </div>
</div>"

1 个答案:

答案 0 :(得分:0)

假设您在SharePoint Online中使用经典UI ...

两个可能的问题:

  • 检查网站是否启用了最小下载策略。 如果是,请禁用它并测试您的代码。 MDS通常只是JavaScript运行一次的原因。 (页面未重新加载,只有数据区域。)
  • 加载列表的下一页是通过Web服务调用,可能不会触发您的JavaScript。 (同样,页面不会重新加载,只会重新加载数据区。)您可能需要拦截分页链接以确保代码运行。 (另请检查是否已启用“异步加载”选项。编辑页面,编辑Web部件,然后展开“AJAX选项”部分。)

您可能需要查看工作流程和计算列解决方案以添加颜色编码。请参阅:http://techtrainingnotes.blogspot.com/2018/01/adding-html-to-sharepoint-columns-color.html