【发布时间】：2015-12-11 18:22:26
【问题描述】：
我正在寻找一种 javascript 解决方案来从数据结构生成 HTML 表（或引导网格布局）。
[
{"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":2,"y":0,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":4,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":8,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":9,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":2,"y":10,"width":1,"height":5,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":12,"width":2,"height":2,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":2,"y":15,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":16,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":0,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":1,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
{"x":2,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"}
]
请注意，“height”和“width”分别代表rowspan和colspan。 p>
谢谢
已编辑
到目前为止，我的解决方案是实施引导网格。不幸的是，它没有考虑 rowspan，因此会产生很多空白。
这里是代码
var cell_height = 80;
var $grid = $('<div class="grid"></div>');
var grid_width = 12;
var items = []; //items
var _getBootstrapGridWidth: function(width){
return Math.round(12/grid_width*width);
};
var _createRow = function(){
var $row = $('<div class="row grid-row"></div>');
$row.css('min-height',cell_height);
return $row;
};
var _fillInEmptyRows = function(current_y,next_y){
var count = next_y-current_y;
(count) && (count--); //needs to subtract 1 to adjust
while (count--){
$grid.append(_createRow());
}
};
//lets create the layout
_.each(items,function(item){
// If y suggests we're on a new row (including the first item), create a new row
if (item.y!==current.y){
$row = _createRow();
_fillInEmptyRows(current.y,item.y);
$grid.append($row);
current.y = item.y;
current.x = 0;
}
var $column = $('<div class="grid-item-wrapper"></div>');
//lets add the data attr
$column.attr('data-x',item.x).attr('data-y',item.y).attr('data-width',item.width).attr('data-height',item.height);
//add width class
$column.addClass('col-sm-'+_getBootstrapGridWidth(item.width));
//if x is not the same as our current x position, add offset class
if (item_data.x!==current.x)
$column.addClass('col-sm-offset-'+_getBootstrapGridWidth(item_data.x-current.x));
//set height of new div
$column.css('min-height',cell_height);
//increment current.x to new starting position
current.x += (item.x-current.x)+item.width;
//add the div to the current row
$column.append($item);
$row.append($column);
});
【问题讨论】：
-
你写了什么代码来解决这个问题？
-
首先，根据该数据手动编写 HTML。然后尝试编写遵循您手动遵循的相同逻辑的 JS。然后你可能会遇到一些特定的编程问题，你会在 stackoverflow 上寻求帮助。
-
数据取自生成布局的 gridstack.js 库。必须考虑 Rowspans 和 Colspans。上面的链接没有解决问题
-
@DanielA.White 我已经添加了到目前为止的代码。
标签： javascript html json gridview grid