2

我正在使用 jQuery 和 tabulator 创建一个相当简单的网页，显示各种现场活动的进度。我在页面上有三个表格元素，显示不同状态的事件。从广义上讲，我有一张用于“现场”、“完成”和“即将到来”的事件的表格。

每个表的制表符代码看起来有点像这样：

var eventTable = {
  layout:"fitColumns",
  columns:[
    {title:"Event ID", field:"eventID"},
    {title:"Event name", field:"eventName"},
    {title:"Event status", field:"eventStatus"}
  ]
};

然后，我可以使用 AJAX 调用从服务器检索的数据生成和填充表：

$('#live-events-table').tabulator(eventTable);
$('#live-events-table').tabulator("setData", "/cgi-bin/getevents.py");
$('#live-events-table').tabulator("setFilter", "status", "in", ["intermission", "mid-event"]);

然后是完成的和即将到来的表格的类似代码。

每次更新页面时，这都会为 getevents.py 创建三个请求。这是不可取的，因为数据是从另一个 API 中提取的，我想避免发送多个相同的请求。此外，数据在请求之间发生变化的可能性很小。

有没有办法使用相同的数据来填充所有三个表？

4

3 回答 3

2

今天学到了一些东西。从未听说过制表符。我一直在以 jQuery 插件的形式将DataTables用于这种高级表格布局。制表机看起来很有希望。以后还要多去探索。

在文档中，我看到了Tabulator - Set Table Data，有很多替代选项可用于设置数据。

希望我正确理解问题。

我解决这个问题的想法/流程是：

  • 假设您已经这样做了：准备服务器端 (getevents.py) 需要在 1 个响应中一起返回 JSON 中的所有“ Live ”、“ Finished ”和“ Upcoming ”行。如何创建具有多个数组的 JSON 对象？.

  • doc ready() 上的客户端，在构建/调用 3 个制表符之前进行 jQuery ajax 调用以获取此数据。

  • 您可以使用加载指示器。因此，一旦返回数据并使用制表器构建，客户端会在 3 x 之前看到发生了一些事情，然后被 jQuery 制表器替换。

  • 在 ajax 成功回调函数中，您可以遍历返回的 json 对象（包含 3 个事件类型）。如果将JSON.parse()存储在 JavaScript 变量中以进行迭代，则可能必须使用它。

  • 现在获取您特定的事件类型数组嵌套对象数组/json。

  • 然后使用指向包含相关数据的每个特定 JavaScript 数组的 setData 调用制表符创建方法。

不确定这是否属于“过早优化”，但我会继续，因为问题本身解决起来很有趣，但你比我更了解需求/需要。

祝你好运。

于 2018-08-11T21:44:53.530 回答
1

我使用@RoryGS 的建议相当简单地解决了这个问题。

像以前一样在变量中定义表选项：

var eventTable = {
  layout:"fitColumns",
  columns:[
    {title:"Event ID", field:"eventID"},
    {title:"Event name", field:"eventName"},
    {title:"Event status", field:"eventStatus"}
  ]
};

success然后进行 jQuery ajax 调用以获取数据，并在函数选项中构建表：

$(function() {
  $.ajax({
    dataType: "json",
    url: "/cgi-bin/getevents.py",
    success: function(data, status){
      $('#live-events-table').tabulator(eventTable);
      $('#finished-events-table').tabulator(eventTable);
      $('#live-events-table').tabulator("setData", data);
      $('#live-events-table').tabulator("setFilter", "status", "in", ["intermission", "mid-event"]);
      $('#finished-events-table').tabulator("setData", data);
      $('#finished-events-table').tabulator("setFilter", "status", "in", ["post-event"]);
    }
})})

似乎有必要为每个表单独设置数据。我想在构造函数中指定数据，但这似乎不起作用。我将继续尝试完善这一点。

于 2018-08-14T02:00:39.893 回答
1

如果您从 URL 获取数据，您可以将其传递到表构造函数中的ajaxURL属性中，制表器将为您发出请求：

$("#example-table").tabulator({
    ajaxURL:"/cgi-bin/getevents.pyw", //ajax URL
    columns:[...] //define columns etc
});
于 2018-09-24T07:10:43.537 回答