如何使用多选项卡表单构建器呈现 JSON 表单数据

Question

使用 FormBuilder link 创建基于多选项卡的表单 -

能够呈现单个选项卡数据。 是否有任何方法或功能可以将多选项卡 json 表单数据呈现到各个选项卡。

 var result = '[[{"type":"text","label":"step 1","className":"form-control","name":"text-1545217902718","subtype":"text"}],[{"type":"text","label":"step 2","className":"form-control","name":"text-1545217905331","subtype":"text"}],[{"type":"text","label":"step 3","className":"form-control","name":"text-1545217906652","subtype":"text"}],[{"type":"text","label":"step 4","className":"form-control","name":"text-1545217908197","subtype":"text"}]]';

// result contains multi-tab json data.

    var res = jQuery.parseJSON(result);
    var stepLen = res.length;
    var j;
    for (var i = 1; i <= stepLen; i++) {
        j = i+1;
        var final_tab_id = j
        var tabId = "step-" + j.toString();

    var $newPageTemplate = $(document.getElementById("new-step"));
    var $newPage = $newPageTemplate.clone().attr("id",tabId).addClass("fb-editor");
    var $newTab = $('#add-step-tab').clone().removeAttr("id");
    var $tabLink = $("a", $newTab).attr("href", "#" + tabId).text("Step " + j);

    $newPage.insertBefore($newPageTemplate);
    $newTab.insertBefore('#add-step-tab');
    $fbPages.tabs("refresh");
    $fbPages.tabs("option", "active", i);
    fbInstances.push($newPage.formBuilder(fbOptions));
    formBuilder2.actions.setData(res[i-1])
}

能够根据 JSON 数据创建 TABS。但数据未呈现到相应的 TABS。

Answer 1

 var result = window.sessionStorage.getItem("formData");
                var res = jQuery.parseJSON(result);
                var stepLen = res.length;
               // var j;
                for (var i = 1; i <= stepLen; i++) {
                    countFB = i + 1;
                    var final_tab_id = countFB;                    
                    var tabId = "#page-" + countFB.toString();
                    $newPageLink.before('<li><a href=' + tabId + '>Page' + countFB + '</a></li>');
                    $newPage.before('<div id="page-' + countFB + '" class="fb-editor"></div>')
                    $formPages.tabs('refresh');
                    var x = countFB - 1;
                    $formPages.tabs('option', 'active', x);
                    const formBuilder = $(tabId).formBuilder();
                    formBuilder.promise.then(function (fb) {
                        fb.actions.setData(formData);
                        fb.actions.setData(res[i - 1]);
                        fbEditor.push(fb);
                    });




                }