在 SharePoint 中呈现列表

Question

我在 Sharepoint 列表中使用此代码在标题后面添加一个小图标。代码在文本后显示图标，但列表无法正常显示且无法访问，就像代码将其变成屏幕截图一样。

<script>
(function () {
   var excludeRows = [0,2,3];

    function renderListItemTemplate(renderCtx) {
        if(excludeRows.indexOf(renderCtx.CurrentItemIdx) > -1)
        {
                return ''; //do not render row
        } else {
        var ret = renderCtx.CurrentItem.Title + "<img src='https://example.com/sites/ud07/HRM/Plaatjes/image.png'/>";
                return ret;
}
        return RenderItemTemplate(renderCtx);
    }

    function registerListRenderer()
    {
       var context = {};
       context.Templates = {};
       context.Templates.Item = renderListItemTemplate;
       SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
    }

    ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();
</script>

我需要更改什么才能使其成为 returns 列表正常显示的正常渲染函数？

马可

Answer 1

请参考以下演示：

(function () {

    SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
        var excludeRows = [0, 2];

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

            OnPostRender: function (ctx) {
                var rows = ctx.ListData.Row;
                rows.forEach((item, index) => {                    
                    if (excludeRows.indexOf(index) == -1) {
                        var rowElementId = GenerateIIDForListItem(ctx, item);
                        var tr = document.getElementById(rowElementId);

                        let jqueryO = $(tr);
                        let tardiv = jqueryO.find("td>div[field='LinkTitle']");

                        tardiv.append("<img src='https://abc.sharepoint.com/sites/sbdev/SiteAssets/MicrosoftTeams-image.png'/>");
                      
                    }
                });
            }
        });
    });
})();

结果：

在 SharePoint 中呈现列表

Render a list in SharePoint

javascript

sharepoint

render

list