Question

在报告页面中，我通过ajax获取数据，然后在一周中的某一天组织它们。我从这个论坛得到了一些帮助，以便开始运行，但遗漏了一个我无法弄清楚的小问题。

一切都被砸成一张大桌子。我希望每周每天分成一个表，然后每个条目嵌套表。有一个艰难的时间想出用我正在使用的代码组织这个。

这是我想要获得的一个例子：

(table)
-----------------------------------
 Monday - May 2nd - 2016
-----------------------------------
(table)
Entry 1 
Description
Date: 2016-05-02 09:45
(/table)
-----------------------------------
(br)(br)

(table)
Entry 2 
Description
Date: 2016-05-02 10:55
-----------------------------------
(/table)
(br)(br)

(/table)    


(table)
-----------------------------------
Tuesday - May 3rd - 2016
-----------------------------------

(table)
-----------------------------------
Entry 3
Description
Date: 2016-05-03 11:55
-----------------------------------
(/table)
(br)(br)

(table)
-----------------------------------
Entry 4
Description
Date: 2016-05-03 13:55
-----------------------------------
(/table)
(br)(br)

(/table)

 ...

这是我到目前为止的代码示例： https://jsfiddle.net/stevenkaspar/vLdn68ko/14/

var items_by_date  = {}; // declare an object that will have date indexes
$.ajax({url:"/SomeUrlBeginninWithSlash",
    dataType: 'json',
    cache: false,
    success: function (data) {

      data.d.results.map(function(item){
        var item_date = moment(item.Date).format('YYYY-MM-DD');
        // if the date index does not exist we need to declare it
        if(!items_by_date[item_date]) items_by_date[item_date] = [item];
        // else we can just push the item on that array
        else items_by_date[item_date].push(item);
      })

      console.log(items_by_date);
      // now you can render how ever you need to
      drawTable(items_by_date);
    }
});

function drawTable(data){
  $('#dataTable').html('');
  for(var d in data){ // d will be the date index
    $('#dataTable').append('<tr><td colspan="2" style="font-weight: bold;">'+d+'</td></tr>');

    data[d].map(function(item){
      $('#dataTable').append('<tr><td>'+item.ID+'</td><td>'+item.Description+'</td></tr>');
    })
  }
}

以下是ajax回调的示例：

responseText: {
    d: {
        results: [{
            ID: "1",
            Description: "Test1",
            Date: "2016-05-02 09:45"
        }, {
            ID: "2",
            Description: "Test2",
            Date: "2016-05-02 10:45"
        }, {
            ID: "3",
            Description: "Test3",
            Date: "2016-05-03 11:45"
        }, {
            ID: "4",
            Description: "Test4",
            Date: "2016-05-04 11:45",
        }]
    }
}

有人会有任何想法吗？

Jquery / HTML - 动态表的表结构问题

0 个答案: