要使用哪个 jquery 可拖动/可调整大小的仪表板模板

Question

背景

我正在制作一个前端界面来显示日志数据。我目前有一个表格，显示具有大量操作的原始数据，一个类似于热图的日历和一个条形图，显示任何选定属性、时间段和粒度的聚合数据（使用 d3）。数据量相当大，因此所有操作都在后端完成（实际上，所有过滤/排序等都是对服务器端的 AJAX 调用）。应该会有更多的图表，以类似的方式。

目标

我想要的是一个仪表板，稍后使用 JQuery 来处理所有图表和统计信息。我简要浏览了以下选项：

• GridList
• Dashing

• Gridly（无法插入 2+ 个链接，因为声誉问题...）

• sDashboard ^

• Gridster（根据 Gridlist，它不再处于开发阶段，因此可靠性不确定？）

问题是我无法真正区分它们之间的显着差异或哪个更适合，而且我的前端经验非常有限（我前几天查了一下并学习了 JS 函数定义语法）。以下是我希望理想实现的功能列表：

1. 每个小部件的行为就像一个普通的 DOM 对象，或者好像没有小部件一样。所以我仍然能够在小部件中操作表格和图形，相互发送 AJAX 调用。
2. 能够为不同的图形添加具有自定义设置的小部件，理想情况下还具有用户定义的小部件之间的关系（我正在考虑分配 ID）。因此，例如可能有 4 个小部件：2 个表格和 2 个图表，每当我点击表格 A 时，图表 A 就会相应更改，而在表格 B 上进行操作时，图表 B 会发生相应变化。（这听起来很棘手，是否可行？）

[可选的]

1. 一键将整个板子更改为某种预设布局
2. 以几乎全屏模式弹出窗口的方式显示小部件的选项，以便更好地操作

这些是我目前能想到的。想知道是否有人做过类似的事情，以及提到的每个/任何选项的优点/缺点/限制是什么？任何建议表示赞赏:)

Answer 1

为什么要自己建造？改用 ELK（Elastica、Log Stash、Kibana）。

它已经构建并且完全符合您的需求——除非您正在登录到数据库。如果你是，那么愿上帝怜悯你的灵魂（和你可怜的 DBMS）。

这是来自 DigitalOcean 的教程，其中包含设置说明： https://www.digitalocean.com/community/tutorials/how-to-install-elasticsearch-logstash-and-kibana-4-on-ubuntu-14-04

无论如何...

免责声明 - 我为 Dashing 项目做出了贡献，我有很大的偏见。

您的清单的答案：

1. HTML 页面上的所有元素都是可以操作的“普通 DOM 对象”，我不明白这与 AJAX 有何关系。您可以从任何网页运行 AJAX 请求，只要请求是针对同一个域或具有 CORS 标头的另一个域（否则会遇到 XSS 问题）
2. Dashing 并不真正支持开箱即用的小部件与其他小部件的交互，但我仍然可以编写代码。这听起来很复杂，我可能会建议不要这样做。
3. 在 Dashing 中，您可以拥有多个仪表板，只需链接到每个仪表板即可获得不同的布局。每个仪表板都有自己的 ERB 模板，该模板根据请求的 HTTP 路由呈现不同的 HTML。
4. 现代浏览器支持Fullscreen API，可用于使小部件全屏显示。