python - Python Dash 嵌套 html ul 列表

Question

我想创建一个破折号 html 组件来显示一定深度的嵌套可折叠树。我有一个 html div，我希望它包含一个 root 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)

标签： pythonhtmlplotly-dash