javascript - 如何使用 Bootstrap 以表格格式显示嵌套 json 的所有字段

Question

我想编写一个连接到 REST api 的实用程序以 JSON 格式下载数据，然后使用 Bootstrap 将数据绘制为嵌套表。

JSON 数据 -

[
    {
     "id" : "Id1",
     "name" : "Name1",
     "orders" : [{"orderId" : "o1", "size" : 34}, {"orderId" : "o2", "size" : 3}]
     },
    {
     "id" : "Id2",
     "name" : "Name2",
     "orders" : [
        {"orderId" : "o3", "size" : 5, "addresses" : [{"addressId" : "a1", "phone" : "1235"}, {"addressId" : "a2", "phone" : 555}]},
        {"orderId" : "o4", "size" : 5, "addresses" : [{"addressId" : "a3", "phone" : "1235"}]}
      ]
    }
]

我查看了 Bootstrap 的子表功能，但似乎需要大量自定义代码才能使其正常工作。有没有更好的方法以通用方式将 json 绑定到表？

编辑

在花了一些时间之后，我能够做到这一点 - 正如你所看到的，我可以获得一层嵌套，但是我只需要深入一层。有什么建议么？

<script>
  var $table = $('#table')

  function buildTable($el, jsonData) {
    var i; var j; var row
    var columns = []
    var data = []

    if(!Array.isArray(jsonData) && jsonData.length == 0) {
        return;
    }

    Object.keys(jsonData[0]).forEach( (k) => {
        columns.push({
            field: k,
            title: k,
            sortable: true
        })
    })

    for(var j = 0; j < jsonData.length; j++) {
        row = {}
        Object.keys(jsonData[j]).forEach( (k) => {
            row[k] = jsonData[j][k]
        })
        data.push(row)
    }


    $el.bootstrapTable({
      columns: columns,
      data: data,
      detailFilter: function (index, row) {
          console.log("detail filter " + Object.values(row))
          for(var k in row) {
            if(Array.isArray(row[k])){
                return true;
            }
          }
          return false;
      },

      onExpandRow: function (index, row, $detail) {
        console.log("expand row keys " + Object.keys(row))
        console.log("expand row vals " + Object.values(row))
        var newRow = {};
        for(var k in row) {
            if(Array.isArray(row[k])){
                alert('found ' + row[k])
                newRow = row[k]
                break
            }
         }
         buildTable($detail.html('<table></table>').find('table'), newRow)
      }
    })

  };
        var mydata = 
            [
                {
                    "id": 0,
                    "name": "test0",
                    "price": "$0",
                    "orders" : 
                    [
                    {
                        "name" : "ABC",
                        "size" : 25,
                        "someList": [{"a":1, "b":2}, {"a":3, "b":4}]
                    },
                    {
                        "name" : "XYZ",
                        "size" : 50
                    }
                    ]
                }
/*              {
        "id": 1,
        "name": "test1",
        "price": "$1"
    },
    {
        "id": 2,
        "name": "test2",
        "price": "$2",
        "orders" : [{"name" : "def", "size": 45}]
    }*/
];

  $(function() {
    buildTable($table, mydata)
  })

标签： javascripthtmltwitter-bootstrap