javascript - 颜色框和 ListView

Question

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

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

一切正常，除了我的 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>

用于绑定(bind)颜色框的 JavaScript:

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

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

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

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

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

(抱歉，如果我遗漏了什么，这是我的第一篇文章)

编辑

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

Answer 1

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

设置您的 ListView 的 LayoutTemplate。你需要一个类为“datatable”的表，你还需要 thead 和 tbody 才能使数据表工作，再加上一些用 jQuery 选择表的方法(这里我正在制作 id“tblStuff”并确保有不是 runat="server")。此外，如果您在设计 View 中创建 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 不变。