0

我正在通过 JS 链接为 SharePoint 列表构建自定义布局......目前我正在自己渲染，但对于一些更复杂的项目（分类法、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];
}
4

1 回答 1

0

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

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

这是否回答你的问题？

于 2016-03-14T20:20:16.713 回答