我如何在数据列表中选择多个图像，而不使用任何复选框

本文关键字：图像 复选框 任何 数据 列表 选择 | 更新日期: 2023-09-27 18:11:45

我有一个数据表

<asp:DataList ID="dlst1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5"
                                CellSpacing="8">
     <ItemTemplate>
           <asp:ImageButton ID="Image" runat="server" ImageUrl='<%#"~/Controls/handler1.ashx?FileName=" +DataBinder.Eval(Container.DataItem, "FilePath") %>'
                                        OnCommand="Select_Command" CommandArgument='<%# Eval("Id").ToString() +";"+Eval("FilePath")+";"+Eval("Index")+";"+Eval("FileName") %>' />
      </ItemTemplate>
  </asp:DataList>

如何选择多个图像?

我如何在数据列表中选择多个图像，而不使用任何复选框

我可能会使用jQuery在客户端选择图像，并在隐藏字段中维护选择。例如,

<asp:DataList ID="dlstImage" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" CellSpacing="8">
     <ItemTemplate>
           <img class="selImg" alt='<%# Eval("Id") %>' src='<%# ResolveUrl("~/Controls/ShowImage.ashx?FileName=") + Eval("FilePath") %>' />
      ...   
      </ItemTemplate>
</asp:DataList>
<input runat="server" id="imageSelection" />

在JS下面使用

$(document).ready(function() {
   var store = $('#<%= imageSelection.ClientID %>');
   var selection = store.val().length > 0 ? store.val().split(",") : [];
   var images = $('.selImg');
   // Set the selection
   images.each(function() {
     var id = $(this).attr('alt');
     if (jQuery.inArray(id, selection) >= 0) {
        $(this).addClass('selected'); // selected CSS class will decide UI for selected image
     }
   });
   // add click handler
   images.click(function() {
     $(this).toggleClass('selected'); // toggle selection UI
     // modify selection
     selection = [];
     images.find('.selected').each(function() {
       selection.push($(this).attr('alt'));
     });
     // update the store
     store.val(selection.join(","));
   });
});

这是一个基本的(未经测试的)代码，应该让您开始。有很多改进，你可以尝试-例如，设置一个焦点矩形图像hive，添加键盘支持，使用html5的数据属性来存储id而不是alt属性等。

相关文章：