Question

背景

我使用HTML框架集呈现数据。左侧框架是构造为HTML表格的导航树形表格。此框架中仅显示最小数据，因为我想使用右侧“详细信息”框架在用户选择其中一个导航表行时为用户提供更多详细信息。

+----------------------------+
|          |                 |
| tree     |   "details"     |
| table    | pertaining to   |
| nav.     |   selected      |
|          |     row         |
|=selected=|                 |
|          |                 |
|          |                 |
|          |                 |
+----------------------------+

将此视为目录浏览器，当您在左侧树中选择项目时，可以在右侧查看文件大小，类型，修改日期等。

获取项目详细信息服务器端是一个顺序任务，即要获取第n个项目的详细信息，服务器必须处理所有n-1个前面的项目。出于这个原因，我认为向用户呈现详细数据的最直接方式是让服务器在导航表行中嵌入所有详细信息，并让脚本在右侧框架中生成详细信息页面。

问题

如何在导航表HTML中表示详细数据？我应该编写自己的元素标记名吗？我应该使用未显示的额外列吗？或者是其他东西？数据通常是名称 - 值对 - 名称和值都可以是文本。每个元素可以具有不同的数据对集合。是否有标准方法在（X）HTML文档中表示用户数据？

Answer 1

永远不会经常混合数据和显示。我还认为您可以轻松绕过迭代n个元素来获取所需的数据。这是你如何做到的。

在javascript中创建模型（您的数据存储）。

var data = [
   {
      title: "item 1",
      foo: "bar",
      baz: 10
   },
   {
      title: "item 2",
      foo: "bazbar",
      baz: 20
   }
];

然后，使用Javascript，您可以使用上面的数据在左侧创建下表

<table>
   <tr><td><a href="#" onclick="showDetails(0);return false;">item 1</a></td></tr>
   <tr><td><a href="#" onclick="showDetails(1);return false;">item 2</a></td></tr>
</table>

那么你就有了你的节目细节功能

function showDetails(index){
   var currentData = data[index];
   /* Do something with data */
}

我创建了一个工作示例here。该代码中存在一个错误，即showDetails未定义，但这是由于jsfiddle问题，如果放入HTML页面，代码将起作用。另外，请务必在顶部使用严格的doctype（以避免跨浏览器quirsk）。

我可能也建议您查看YUI 2's layout manager而不是使用框架集。框架集需要多个页面，其中javascript全部存在，并且可能成为未来的维护噩梦。

如何表示与HTML表行关联的不可见名称 - 值对数据？

1 个答案: