Question

我有以下分层JSON数据。我想在可折叠和分层的表中显示它。哪个React UI框架/插件支持使用slide bar for the "volume"字段显示层次结构数据？我该如何实施？

.dot

这就是我希望显示数据的方式。

Answer 1

这里是使用表格式的无框架方法。如果使用引导程序之类的ui框架，则只能使用其classNames。 Here's a sandbox使用称为react-collapsible的模块进行折叠。

export default function Test(props) {

var fmtd = dta.map((la, idx) => {
    var fmt1 = la.another.map((lb, idx2) => {
        return(
    <div key = {idx2}>    
        <tr style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}} >
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> {la.id}</td><td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> {la.name}</td>
        </tr>
        <tr style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> {lb.anotherId}</td><td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> {lb.anotherName}</td>
        </tr>
        { lb.format.map((lc, idx3) => {
            let volBar = []
            for(let i = 0; i <21; i++){
                i === lc.volume ? volBar.push(lc.volume) : volBar.push("-")
            }
        return(
        <tr key={idx3}style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
            <td style={{paddingRight: 10, fontSize: 16, fontWeight: 'bold'}}> 
                {lc.format}
            </td>
            <td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> 
            {lc.isEnabled}
            </td>
            <td style={{paddingLeft: 10, fontSize: 16, fontWeight: 'bold'}}> 
            {volBar}
            </td>
        </tr>)
        })}
    </div>)
    })
        return (      
         <table>
            <tbody>
            {fmt1}
            </tbody>
         </table>

        )
})
return fmtd
}

React：在可折叠表格中显示分层JSON数据

1 个答案: