Question

我有一个不同高度列的怪异网格。我的意思是，第1列可能有4个正方形需要填充，而第2列可能有5个，第3列可能有2个。出于这个问题的目的，假设它们是静态的，值如下：

Col   |  Height
---------------
1         4
2         3
3         5
4         2
5         3

我的第一个ajax调用将返回一个项目数组。每个item都会有name和url。

处理原始呼叫的功能可能如下所示：

var processJSONResult = function (data ) {

  myglob= data.data;
  $.each(data.data, function(i, item){

   url = item.url;
   name = item.name; 

  });
}

所以这引起了质疑：最初填充网格的最有效方法是什么。我有一个html模板，然后逐个填写吗？或者我是否动态创建网格然后填充它？

问题的第二部分涉及更新。每隔一段时间，页面就会启动一个新条目的ajax调用。如果条目出现，我们将需要随机（或不，但我随机更容易）将它们添加到网格中，替换旧的网格条目之一。

所以第二个问题：考虑到你认为在第一部分中最好的方法，最好的方法是什么？

我知道这是一个问题，所以感谢所有花时间去看它的人。

Answer 1

好吧，因为它是静态的，这将起作用..

假设您有一个带有复杂TABLE的HTML文档（嵌套或不嵌套）。您只需要几个＆lt; span id=“squareN”>，其中squareN是您的方块的名称或编号。

然后您的服务器可以响应以下JSON字符串：

{“squareA":123, “squareB":456, “squareN":567}

在客户端，您需要做的就是：

$.getJSON("myserver.php", function(squareName, squareValue)
{   $("#" + squareName).text(squareValue); }

Answer 2

这实际上是我最终做的事情

var populateFPTracks = function(data)
{
    currentcounter=0;
    //alert(data.data[1].track);
    for (x=0; x < totalcols; x++)
    {
        var $colheight= Math.floor(Math.random()*6)+1;
        for (y=0; y < $colheight; y++)
        {
            name = data.data[currenttrackcounter].track.name
            url = data.data[currenttrackcounter].track.url
            currenttrackcounter++;
            $("#do_col"+x).append('<div class="do_trackbox"></div>');
        }

    }

使用JQuery和AJAX填充和更新形状奇特的网格（或表）

2 个答案: