HTML/CSS/jQuery：表格数据和缩略图答案

【问题标题】：HTML/CSS/jQuery: Tabular data & thumbnailsHTML/CSS/jQuery：表格数据和缩略图
【发布时间】：2010-08-30 02:04:25
【问题描述】：

是否有一种快速/简单的方法来获取表格数据并有一个将它们转换为缩略图的按钮（一种 2 视图系统，表格/缩略图）--我不是在寻找图像缩略图...

感谢任何想法！ :)

例子：

【问题讨论】：

“缩略图”到底是什么意思？你的桌子的缩小版？
查看我的编辑——同样，不是在寻找图像，但如果每个“拇指”都是一个 li 元素，我可以用表格中的适当数据填充它...
我想我的意思是列表/网格视图...

标签： jquery html css

【解决方案1】：

如果您想渲染一个标准表格，然后使用 jQuery 构建缩略图视图，那么这里有一个示例：

呈现的 HTML：

<a href="#" id="changeview">Change view</a>
<table id="theTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>Description 1</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Description 2</td>
        </tr>
        ...
    </tbody>
</table>

jQuery:

var thumbnails = $('<ul></ul>').attr('id', 'theThumbnails').insertAfter('#theTable').hide();
$('#theTable tbody tr').each(function() {
    var cells = $(this).find('td');
    var thumbnail = $('<li></li>').addClass('thumbnail');
    $('<h3></h3>').text($(cells[0]).text()).appendTo(thumbnail);
    $('<p></p>').text($(cells[1]).text()).appendTo(thumbnail);
    thumbnail.appendTo(thumbnails);
});

$('#changeview').live('click', function() {
    $('#theTable, #theThumbnails').toggle();
});

实际上，您可以通过链接一些语句来稍微缩短 jQuery 代码。

这是一个工作示例：http://jsfiddle.net/2PCnL/1/

【讨论】：

【解决方案2】：

我会使用客户端模板机制来实现这一点。

您将定义两个模板 - 一个是“列表”视图，另一个是“缩略图”视图。两个模板合并的数据是一样的。

我会推荐使用 Resig 的模板库（jQuery 插件） - http://github.com/jquery/jquery-tmpl

非常简单，但会完成你需要的。

例子：

缩略图模板：

{{each}}
  <div style="float: left;">
    <img src="${{thumbnailUrl}}" alt="${{description}}" />
  </div>
{{/each}}

列表模板：

<ul>
  {{each}}
    <li>${{description}}</li>
  {{/each}}
</ul>

您要合并的数据可能如下所示：

arrData = 
[ { thumnailUrl: "/image.gif", description: "Some image" },
  { thumbnailUrl: "another.gif", description: "Another image" }
]

要将模板应用到页面上的容器 div，id 为：'divContainer'：

$("#divContainer").append( templateContents, arrData );

【讨论】：