被修改

Question

我正在寻找一个从数据结构生成HTML表（或引导网格布局）的JavaScript解决方案。

[
    {"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"}
]

请注意，“高度”和“宽度”分别代表 rowspan 和 colspan 。

谢谢

被修改

到目前为止，我的解决方案是实现引导网格。不幸的是，它没有考虑 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);
});

Answer 1

您可以简单地遍历json数组中的项目并构建所需的任何标记。使用$.each迭代数组中的项目。

 var data =[
             {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sitamet"},
             {"x":2,"y":0,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"}      

           ];



var tbl="<table>";

 $.each(data,function(index,item){

     tbl+="<tr><td rowspan='"+item.height+"' colspan='"+item.width+"'>"
                                                             +item.title+"</td></tr>";

  });

  tbl+="</table>";

 $("#tblContainer").html(tbl);

假设tblContainer是您要在其中显示此表格的容器div的ID。

Here是一个示例

Answer 2

请检查这是否解决了您的问题

var tblData = [
    {"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"}
];


// Add your javascript here
$(function(){

  var tableTag = "<table border='1'>";
  for(i = 0;i<tblData.length;i++){
      //tableTag+="<tr><td>"+tblData[i].x+"</td><td>"+tblData[i].y+"<td colspan="+tblData[i].width+" rowspan="+tblData[i].height+">"+tblData[i].title+"</td></tr>";
      tableTag+="<tr><td colspan="+tblData[i].width+" rowspan="+tblData[i].height+">"+tblData[i].title+"</td></tr>";
  }

$("#tblid").html(tableTag);
});

http://plnkr.co/edit/YpljIJ6WaX8QOPc2fPPs?p=preview

需要JS从JSON生成表格html

被修改

这是代码

2 个答案: