如何使用多选项卡FormBuilder呈现JSON表单数据

时间:2018-12-21 04:50:53

标签: jquery formbuilder

使用FormBuilder link-

创建了基于多标签的表单

能够呈现单个标签数据。 有什么方法或功能可以将多标签json表单数据呈现到相应的标签。

from bokeh.plotting import figure, curdoc, show, output_file
from bokeh.models import ColumnDataSource
from bokeh.layouts import column, row
from bokeh.io import curdoc
import pandas as pd
import numpy as np


df = pd.DataFrame(np.random.randint(0,10,size=(5, 2)), columns=list('XY'),index=['A','B','C','D','E'])


#Plotting points on first chart.
pointchart=figure(plot_width=400, plot_height=400, tools='lasso_select',title="Point scatter")
pointchart_source= ColumnDataSource(df)
pointchart_glyph= pointchart.circle("X","Y",source=pointchart_source)

#Making point plot with same source.
linkedpointchart=figure(plot_width=400, plot_height=400, title="Point scatter_LinkedSource")
linkedpointchart.circle("X","Y",source=pointchart_source)


#Making plot populated by updated source.
newplot=figure(plot_width=400, plot_height=400, title="Point scatter New Source via Callback")
newdatasource= ColumnDataSource(df) 
pglyph = newplot.circle(x='X', y='Y', source=newdatasource)


def newsourcecallback(attr, old, new):
        indexvalues =list(pointchart_source.data['index'][new])
        newdataframe= df.loc[indexvalues,:]
        newsource=ColumnDataSource(newdataframe[["X","Y"]])
        pglyph.data_source.data=newsource.data
        print(indexvalues)

pointchart_glyph.data_source.selected.on_change('indices',newsourcecallback) 


layout= row(pointchart,linkedpointchart,newplot)
show(layout)


curdoc().add_root(row(pointchart,linkedpointchart,newplot))


#bokeh serve --show Callback_workingExample.py

能够基于JSON数据创建TABS。但数据未呈现到各自的TABS。

enter image description here

1 个答案:

答案 0 :(得分:0)

 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);
                    });




                }