jquery配合.NET實作點選指定綁定資料並且能夠一鍵下載-PHP开发-PHP中文網

jquery配合.NET實作點選指定綁定資料並且能夠一鍵下載

高洛峰

發布： 2016-12-08 14:14:15

原創

1174 人瀏覽過

需求需點擊綁定的數據，將指定的附件下載下來，並且是批量下載（綁定的數據非datagrid,後台拼接的綁定）。

效果圖如下：

jquery配合.NET實作點選指定綁定資料並且能夠一鍵下載

大體思路：

1.jquery得到選中的綁定資料的id,將這個id賦值到數組中，最後將這個數組的值賦值給頁面中創建的隱藏值給頁面中創建的隱藏在數組中，最後將這個數組的值賦值給頁面中創建的隱藏在頁面中變數

2.後台取得到隱藏變數的值，並將它循環陣列取值，得到綁定值的下載位址，最後打包下載

首先html中div根據後台綁定

<div id="downloadInfo" runat="server"></div>

登入後複製

是下載附件的選擇，利用jquery實現，並且將值賦值給頁面中的隱藏變量，代碼如下：

// 下载附件的选择
  $attach = $("#download-list");
  var arr = []
  $attach.on(&#39;click&#39;, &#39;.no&#39;, function () {
    $(this).toggleClass(&#39;checked&#39;);//设置和移除，选中与不选中
    if ($(this).hasClass(&#39;checked&#39;)) {
      var guid = $(this).children("#hidAttachGuid").val();
      arr.push(guid);//将guid添加到arr数组中
       
    }
    else
    {//取消选中时
      var guid = $(this).children("#hidAttachGuid").val();
      var n = arr.indexOf(guid);
      if (n != -1)
      arr.splice(n, 1);//将指定不选中的guid移除arr数组
    }
    $("[id$=&#39;arrayGuid&#39;]").val(arr);
  });

登入後複製

因為是後台拼接的，把button也拼接在了後台，後台button 調用js

<button type=&#39;button&#39; class=&#39;one-download&#39; onclick=&#39;download()&#39;>一键下载</button>
function download() {
      $("#btnDownload").click();
    }

登入後複製

js觸發隱藏button事件

<span style="display: none">
   <asp:Button ID="btnDownload" OnClick="btnDownload_Click" Text="确定" runat="server" />
    <input type="text" id="arrayGuid" runat="server" />
</span>

登入後複製

rrrr

和pageload同層代碼

protected void btnDownload_Click(object sender, EventArgs e)
    {
      //ZipFileByCode();
      string attachGuid = arrayGuid.Value;
      string[] sArray = attachGuid.Split(&#39;,&#39;);
 
      
      List<string> list = new List<string>();
      foreach (string i in sArray)
      {
        //这里是循环得到指定需要下载的所有id
  
      }
 
      Download(list, ""+lblCourseName.Text+"相关附件材料.rar");
    }

登入後複製