颜色框和列表视图

Question

我对 JavaScript / jQuery 比较陌生，并且使用 ASP.NET 的经验不到 6 个月。我在使用带有 SQL Server 应用程序的 ASP.NET 的 colorbox 插件时遇到了问题。

现在，我正在使用 colorbox 在我正在开发的 PhotoGallery 中打开缩略图的更大显示。一切似乎都很好，我可以在彩盒显示中将照片组合在一起。

一切正常，除了我的ListView 有分页，所以每页只显示 40 张图像。 Colorbox 只会对当前在 ListView 页面上的照片进行分组。

.ASPX 页面ListView（不漂亮但可以）

<ItemTemplate>
    <td id="Td2" runat="server" style="padding:10px">
        <a class='colorbox' href="/Photos/AllPhotos/<%#Eval("FileName") %>" 
            title="<strong><%# Eval("Title") %></strong> photo by: <%#Eval("Name") %>">
        <img src="/Photos/AllPhotos/Thumbnail/<%#Eval("FileName") %>"
            title="<%# Eval("Title") %>" /></a>
    </td>
</ItemTemplate>

用于绑定颜色框的 JavaScript：

function pageLoad() {
    $("a.colorbox").colorbox({
        rel: "gal",
        maxWidth: "100%",
        maxHeight: "100%"
    })
};

我想要将颜色框绑定到绑定到ListView 的所有照片，而不仅仅是当前页面。因此，理想情况下，用户可以翻阅我们画廊中的所有照片（通过单击其中一个缩略图），而不必关闭颜色框 --> 转到下一页 --> 再次打开颜色框。

有没有一种简单的方法可以将颜色框绑定到ListView 中的所有照片？我可以想到一些“黑客”方法（例如将照片绑定到隐藏的ListView，并将它们与显示的照片分组），但我正在尝试开发一个很好用的应用程序！

我发现了一些看起来像 promising 的东西，但我以前从未使用过 JSON/SQL，所以如果我必须这样做的话，我会有一个学习曲线。

任何帮助都将不胜感激，我在工作中经常使用这些论坛，所以这是我第一个来寻求建议的地方。

（对不起，如果我错过了什么，这是我的第一篇文章）

编辑

好吧，我想出了一些办法，可以完成工作，但可能不如我希望的那么好。我最终做的是创建第二个数组，其中填充了所有未显示的照片，将其绑定到隐藏的 ListView，然后将隐藏的照片与显示的照片分组。它似乎工作得很好，只是没有我希望的那么干净，所以我仍然愿意接受更好的方法（如果有的话），但现在我很满足。

Answer 1

这是一种使用 datatables 并将所有数据绑定到服务器上的 ListView 的方法（不要在 ListView 上使用分页）并在客户端获得更流畅的分页，这仍然适用于 colorbox。

设置您的 ListView 的 LayoutTemplate。您将需要一个带有“datatable”类的表，并且还需要 thead 和 tbody 才能使数据表正常工作，以及一些使用 jQuery 选择表的方法（这里我将 id 设置为“tblStuff”并确保存在没有 runat="server")。此外，如果您在设计视图中创建了 LayoutTemplate，请务必小心，因为 Visual Studio 有将一个表嵌套在另一个表中的习惯。

<LayoutTemplate>
    <table id="tblStuff" class="datatable">
        <thead><tr><th>...(Your <th> elements go here)...</tr></thead>
        <tbody><tr ID="itemPlaceholder" runat="server"></tr></tbody>
    </table>
</LayoutTemplate>

现在在脚本中，你可以这样做：

$(document).ready(function() {
    $('a.colorbox').colorbox({
        // just how you had it before.
    });

    $('#tblStuff').dataTable({
        // here is where you'll want to set some of the many many options for datatables.
        // See their documentation.
    });
});

仅此而已。您应该能够保持 ItemTemplate 不变。