javascript - 动态更新 html 表

Question

我的网页包含一个下拉列表和一个表格。当用户在下拉列表中进行选择时，这将使用数据动态填充表格。我想知道填充此表的最佳方法是什么。我将 Spring MVC 和 JSP 用于我的服务器端技术。在用户做出下拉选择后，我们很可能会发出单独的请求来检索数据，而不是一开始就全部检索。我的一个想法如下：

1. 使用 JSP 创建一个将被隐藏的虚拟表行
2. 检索到带有数据的响应后，转换为 JSON 对象
3. 使用 JS/JQuery 为每个 JSON 对象克隆虚拟行

这是一个好的解决方案吗？或者有没有更好的方法？

Answer 1

除非数据非常庞大或快速变化的“实时”信息，否则请在表格中以一系列<tbody id="xxx">...</tbody>元素（每个下拉选项一个）的形式将其与页面一起提供。在下拉菜单中附加一个“onchange”处理程序，它显示与当前选定选项相对应的 tbody，并隐藏所有其他选项。

如有必要，您可以采用与 AJAX 类似的方法来获取数据。使用空<tbody id="xxx">...</tbody>元素为页面提供服务 - 每个选项一个。然后从下拉列表的 onchange 处理程序中“按需”填充 tbody 并按上述方式显示/隐藏。如果合适，您可以在 inchange 处理程序中包含一个测试，以确保每个数据集只获取一次 - 如果已经接收到数据，那么它将被缓存在其 tbody 中。最终，当所有 tbody 都被填充时，此解决方案将与上述解决方案相同。

Answer 2

更好的方法可能是使用诸如 handlebars.js 或 mustache.js 模板（或任何其他前端模板引擎）之类的东西，因为它们都采用 JSON 对象并将其插入可以附加到您的 html 的模板中。如果您通过 AJAX 获取数据，这非常有效，如果 AJAX 无论如何都返回 JSON，效果会更好。

Answer 3

如果您的项目允许第三方 JQuery 插件，我建议您查看DataTables。开箱即用，它应该可以满足您的一切需求。我已经在各种项目中使用 DT 几年了，发现它是一个强大而稳定的插件。