如何解决使用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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。