Python Dash嵌套的html ul列表

时间:2018-08-06 17:53:37

标签: python html plotly-dash

我想创建一个破折号html组件,以显示一定深度的嵌套可折叠树。我有一个html div,我希望它包含根html.Ul。 对于每个深度,我都有一个标签列表和一个带有对应子树的列表列表,这些子树是下一个深度的标签。

html.Ul([
    html.Li([
              'subtotal1',
              html.Ul([html. Li([...] ) ]),
              'subtotal2', 
              html. Ul([html. Li([...]) ] )             
    ] ) 
])

这是我的一个深度代码:

html_lists = []
for i in reversed(range(1,2)):
    html_ul_list = html.Ul([])
    pp.pprint(fp_data[i], indent = 4)

    for cat in fp_data[i]['unique']:
        html_ul_list.children.append(
            html.Li([cat,
                     html.Ul(
                         [html.Li(fp_data[i]['lists'][idx]) for idx in range(0,len(fp_data[i]['lists']))]

                         )
                     ])
            )

    html_lists.append(html_ul_list)

其中

fp_data[0]['unique'] = ['Total']
fp_data[0]['lists'] = [['Total|Shape','Total|FirstOrder']]

fp_data[1]['unique'] = ['Total|Shape','Total|FirstOrder']
fp_data[1]['lists'] = [['Total|Shape|Mean','Total|Shape|Kurtosis'], 
['Total|FirstOrder|Mean','Total|FirstOrder|GrayLevel']]

fp_data[2]['unique'] = ['Total|Shape|Mean','Total|Shape|Kurtosis','Total|FirstOrder|Mean','Total|FirstOrder|GrayLevel']

fp_data[2]['lists'] = [
['Total|Shape|Mean|x','Total|Shape|Mean|y'], 
['Total|Shape|Kurstosis|x','Total|Shape|Kurstosis|y'], 
['Total|FirstOrder|Mean|x','Total|FirstOrder|Mean|y'],
['Total|FirstOrder|Graylevel|x','Total|FirstOrder|GrayLevel|y'],
]

编辑:使用提供的数据进行更多试验:

    html_lists = []
    for i in reversed(range(0,3)):
        html_ul_list = html.Ul([],style = {'text-align':'left', 'marginLeft':'5px'})
        pp.pprint(fp_data[i], indent = 4)

        for idxcat,cat in enumerate(fp_data[i]['unique']):
           print('idxcat',idxcat)
           print(fp_data[i]['lists'])
            html_ul_list.children.append(
               html.Li([cat,
                         html.Ul(
                             [html.Li(fp_data[i]['lists'][idxcat][idx]) for idx in range(0,len(fp_data[i]['lists'][idxcat]))]

                             )
                         ])
                )

        html_lists.append(html_ul_list)

enter image description here

0 个答案:

没有答案