javascript - 使用 Javascript 从 JSON 对象动态生成 Bootstrap 网格 HTML

Question

我正在尝试从 JSON 对象生成 HTML。请查看下面我所需的输出 HTML 和 JSON

所需生成的 HTML

<div class="container">
  <div class="row">
    <div class="col col-sm-5">Span 5</div>
    <div class="col col-sm-3">Span 3</div>
    <div class="col col-sm-2">
      <div class="col col-sm-12">Span 2</div>
      <div class="col col-sm-12">Span 2</div>
    </div>
  </div>
</div>  

JSON

    [
               {
                    "Name": "span5",
                    "RowSpan":2,
                    "ColSpan": 5
                },
                {
                    "Name": "span3",
                    "RowSpan": 2,
                    "ColSpan": 3
                },
                {
                    "Name": "span2",
                    "RowSpan": 1,
                    "ColSpan": 2
                },
                {
                    "Name": "span2",
                    "RowSpan": 1,
                    "ColSpan": 2
                }
   ]

我尝试的代码如下，它没有按预期工作，我能够实现colspan，但是，我不确定如何实现rowspan。 最后一个 span2 单元格应位于第三个 span2 单元格下方，这样第一个和第二个单元格应占据两行，因为它们的 rowspan 为 2

https://jsfiddle.net/v1mzn6bu/

HTML

<div class="container">
  <div id="replica" class="row">

  </div>
</div>

Javascript

var replica = document.getElementById('replica');
for(var i = 0; i < json.length; i++) {
    replica.innerHTML += '<div class="col col-sm-' + json[i].ColSpan + '">' + json[i].Name + '</div>';
}

Answer 1

它似乎可以实现您想要的结构，您需要将两个列嵌套在另一个列中

我建议您相应地制作 JSON 结构，例如

var json = [         {
                    "Name": "span5",
                    "ColSpan": 5
                },
                {
                    "Name": "span3",
                    "ColSpan": 3
                },
                {
                    "Name": "span2",
                    "ColSpan": 2,
                    "children":[
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      },
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      }
                    ]
                }
];

值得注意的是，您需要一个“children”属性来在右侧制作较小的 span2 div，因此您需要在 javascript 中对其进行导航(reduce 函数可能会有所帮助):

var replica = document.getElementById('replica');
var str  = "";
for(var i = 0; i < json.length; i++) {
    str += '<div class="col col-sm-' + json[i].ColSpan + '">' + (json[i].children ? 
  json[i].children.reduce((acc,child) =>(acc + '<div class="col col-sm-' + child.ColSpan +'">' + child.Name + '</div>'),"" ) 
  : json[i].Name) + '</div>';
}
replica.innerHTML = str;

我在这里 fork 了你的 JSFiddle:https://jsfiddle.net/s4vtyek2/