使用Javascript从JSON对象动态生成引导网格HTML

问题描述

我正在尝试从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
                },"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>';
}

解决方法

似乎可以完成您想要的结构，将两个cols嵌套在另一个cols中

我建议您相应地构建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;

我在这里分叉了您的JSFiddle：https://jsfiddle.net/s4vtyek2/