查看项目表单选项卡

Question

我是 JS 的新手Link，我正在尝试将 View Item 表单的字段分隔为选项卡而不是 New Item 表单（尝试在 DispForm 上使用它，显示选项卡但没有显示不同的字段）。是否有任何示例或方法可以修改它以在视图表单上工作？

Link: https://code.msdn.microsoft.com/office/Client-side-rendering-code-b2eedf92#content

var currentFormUniqueId; 
var currentFormWebPartId; 

// Use "Multi String" javascript to embed the required css 
var MultiString = function (f) { 
    return f.toString().split('\n').slice(1, -1).join('\n'); 
} 

//CSS would go here

var tabsObj = [ 
["General", ["Title", "Age", "Married", "Mobile", "SSN"]], 
["Work", ["Manager", "Salary", "Phone", "Email"]], 
["Other", ["Comments"]] 
]; 


(function () { 

// jQuery library is required in this sample 
// Fallback to loading jQuery from a CDN path if the local is unavailable 
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>')); 

var tabsContext = {}; 
tabsContext.OnPreRender = TabsOnPreRender; 
tabsContext.OnPostRender = TabsOnPostRender; 


// accordionContext.OnPostRender = accordionOnPostRender; 
tabsContext.Templates = {}; 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(tabsContext); 

})(); 

function TabsOnPreRender(ctx) { 
if (!currentFormUniqueId) { 

    currentFormUniqueId = ctx.FormUniqueId; 
    currentFormWebPartId = "WebPart" + ctx.FormUniqueId; 

    jQuery(document).ready(function () { 

        var tabHTMLTemplate = "<li class='{class}'><a href='#{Index}'>{Title}</a></li>"; 
        var tabClass; 
        var tabsHTML = ""; 

        for (var i = 0; i < tabsObj.length; i++) { 
            tabClass = ""; 
            if (i == 0){ tabClass = "active";} 
            tabsHTML += tabHTMLTemplate.replace(/{Index}/g, i).replace(/{Title}/g, tabsObj[i][0]).replace(/{class}/g, tabClass) 
        } 

        jQuery("#" + currentFormWebPartId).prepend("<ul class='tabs'>" + tabsHTML + "</ul>"); 


        jQuery('.tabs li a').on('click', function (e) { 
            var currentIndex = jQuery(this).attr('href').replace("#",""); 
            showTabControls(currentIndex); 
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
            e.preventDefault(); 
        }); 

        showTabControls(0); 

        jQuery("#" + currentFormWebPartId).prepend("<!--mce:0-->"); 
    }); 

} 
} 

function TabsOnPostRender(ctx) { 
var controlId = ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id; 
jQuery("[id^='" + controlId + "']").closest("tr").attr('id', 'tr_' + ctx.ListSchema.Field[0].Name).hide(); 
} 

function showTabControls(index) 
{ 
jQuery("#" + currentFormWebPartId + " [id^='tr_']").hide(); 

for (var i = 0; i < tabsObj[index][1].length; i++) { 
    jQuery("[id^='tr_" + tabsObj[index][1][i] + "']").show(); 
}

}

Answer 1

替换函数 TabsOnPostRender 和 showTabControls：

function TabsOnPostRender(ctx) {
    var controlId = ctx.ListSchema.Field[0].Name;
    jQuery("a[name^='SPBookmark_" + controlId + "']").closest("tr").hide();
}

function showTabControls(index ){
    jQuery("a[name^='SPBookmark_']").closest("tr").hide();
    for (var i = 0; i < tabsObj[index][1].length; i++) {
        jQuery("a[name^='SPBookmark_" + tabsObj[index][1][i] + "']").closest("tr").show();
    }
}

查看项目表单选项卡

View Item Form Tabs

javascript

sharepoint

jslink