使用 Javascript 從 JSON 對象動態生成引導網格 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

它似乎做你想要的結構，你需要將兩個 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/