首頁 > php教程 > PHP开发 > jquery配合.NET實作點選指定綁定資料並且能夠一鍵下載

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

高洛峰
發布: 2016-12-08 14:14:15
原創
1189 人瀏覽過

需求需點擊綁定的數據,將指定的附件下載下來,並且是批量下載(綁定的數據非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");
    }
登入後複製

   

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板