如何通过JS在Sharepoint 2013列表视图中触发默认渲染Link

How to trigger default rendering in Sharepoint 2013 List View via JS Link

本文关键字：默认 Link 视图 JS 何通过 Sharepoint 列表 2013      更新时间：2023-09-26

我正在通过JS建立一个SharePoint列表的自定义布局Link…目前我都是自己渲染，但对于一些更复杂的项目(分类，url等)，如果能够触发SharePoint的自定义渲染就太好了。

对于单个字段类型，这是可能的吗?

var csListView = csListView || {};
csListView.ListBody = '<div class="datagrid"><table><thead>{LIST_HEADER}</thead>{LIST_BODY}<tfoot><tr><td colspan="{FIELD_COUNT}"><div class="paging">{PAGINATION}</div></td></tr></tfoot></table></div>';
csListView.HeaderRow = '<tr>{HEADER_ITEMS}</tr>';
csListView.HeaderItem = '<th>{HEADER_ITEM}</th>';
csListView.BodyRow = '<tr class="{ALT_CLASS}">{LIST_ITEMS}</tr>';
csListView.BodyItem = '<td>{LIST_ITEM}</td>';
csListView.CustomizeFieldRendering = function ()
{
    var fieldJsLinkOverride = {};
    fieldJsLinkOverride.Templates = {};
    fieldJsLinkOverride.Templates.Body = csListView.RenderBody;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
};
csListView.RenderBody = function (ctx) {
    var colspan = ctx.ListSchema.Field.length;
    var html = '';
    var itemHtml = '';
    var itemsHtml = '';
    var rowHtml = '';
    var bodyHtml = '';
    var paginationHtml = '';
    var headerItemsHtml = '';
    var headerHtml = '';
    //Render Header fields
    for (var i = 0; i < ctx.ListSchema.Field.length; i++) {
        var sortUrl =   location.search + '?SortField=' + ctx.ListSchema.Field[i].RealFieldName  + '&SortDir=Desc';//ctx.HttpRoot + ctx.listUrlDir + '/&' + ctx.ListSchema.FieldSortParam
        var item = '<a href="' +  sortUrl + '">' + ctx.ListSchema.Field[i].DisplayName + '</a>';
        headerItemsHtml += csListView.HeaderItem.replace('{HEADER_ITEM}', ctx.ListSchema.Field[i].DisplayName);
    }
    headerHtml = csListView.HeaderRow.replace('{HEADER_ITEMS}', headerItemsHtml);
    //Go through all rows
    for (var i = 0; i < ctx.ListData.Row.length; i++) {
        var cssClass = (i % 2 == 0) ? 'alt' : '';
        //Go through all fields
        itemsHtml = '';
        for (var j = 0; j < ctx.ListSchema.Field.length; j++) {
            var item = csListView.renderField(ctx, ctx.ListSchema.Field[j], ctx.ListData.Row[i]);
            itemHtml = csListView.BodyItem.replace('{LIST_ITEM}',item);
            itemsHtml += itemHtml;
        }       
        rowHtml = csListView.BodyRow.replace('{LIST_ITEMS}',itemsHtml);
        rowHtml = rowHtml.replace('{ALT_CLASS}', cssClass);
        bodyHtml += rowHtml;
    }
    html = csListView.ListBody.replace('{LIST_BODY}', bodyHtml);
    html = html.replace('{PAGINATION}', renderPaging(ctx));
    html = html.replace('{FIELD_COUNT}', colspan);
    html = html.replace('{LIST_HEADER}', headerHtml);
    return html;
};

csListView.renderField = function (ctx, fieldData, rowData) {
    return rowData[fieldData.RealFieldName];
}

要更改字段的视图，可以使用

var ctx = {};
ctx.Templates = {};
ctx.Templates.Fields = {'ColumnName': { 'View' : '<b><#=ctx.CurrentItem.ColumnName#></b>' }};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);

这样回答你的问题了吗?

相关文章：