I'm currently building a file download in PHP like Google Drive but just a way more simple. So in my case I have a list with some files. To get rid of a download button in each row, I planned using a single download button and jQuerys seleactable function:
$( "#storage-files-table" ).selectable();
Now I can select single or multiple rows. When I press my download button now, I want to get a list of all selected elements so that I now which file should be served for download. Does anyone know how I can get this done?
jQuery(document).ready(function($) { $("table").selectable(); }); function download() { //Here I want to get a list of all selected rows }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="download()">Download</button> <table> <thead> <th>col1</th> <th>col2</th> <th>col3</th> </thead> <tbody> <tr> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </tbody> </table>
.find("tr.ui-selected")
.tbody
as your selectee, if you plan to select rows . jQuery(function($) { const $tbody = $("#myTable tbody"); function download() { //Here I want to get a list of all selected rows const $trSelected = $tbody.find("tr.ui-selected"); // Collect data-file-id values const IDs = $trSelected.get().map(tr => tr.dataset.fileId); console.log( IDs ); } $tbody.selectable(); $("#download").on('click', download); });
.ui-selected td { background: #0bf; }
<button id="download">Download</button> <table id="myTable"> <thead> <th>col1</th> <th>col2</th> <th>col3</th> </thead> <tbody> <tr data-file-id="a595"> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr data-file-id="b456"> <td>b1</td> <td>b2</td> <td>b3</td> </tr> <tr data-file-id="c753"> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Consider the following example.
jQuery(document).ready(function($) { function download(e) { e.preventDefault(); var selected = $("tr.ui-selected"); var sArr = []; if (selected.length) { selected.each(function(i, el) { sArr.push($(el).data("file")); }); // perform download using Array } else { return false; } } $("#download-table tbody").selectable({ stop: function() { var result = $("#select-result").empty(); result.append("You have selected: "); $("tr.ui-selected", this).each(function(i, el) { result.append($(el).data("file-name") + " "); }); if ($("tr.ui-selected").length) { $("#download").prop("disabled", false); } else { $("#download").prop("disabled", true); } } }); $("#download").click(download); });
#download-table { font-size: 1.4em; } #download-table.ui-selecting { background: #FECA40; } #download-table.ui-selected { background: #F39814; color: white; } #download-table td { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <h2>Select your downloads.</h2> <table id="download-table"> <thead> <th>col 1</th> <th>col 2</th> <th>col 3</th> </thead> <tbody> <tr id="row-1" data-file="hash-1" data-file-name="Name1.zip"> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr id="row-2" data-file="hash-2" data-file-name="Name2.zip"> <td>b1</td> <td>b2</td> <td>b3</td> </tr> <tr id="row-3" data-file="hash-3" data-file-name="Name1.zip"> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </tbody> </table> <div id="select-result"></div> <button id="download" disabled="disabled">Download</button>
This adds to what you have so the User cannot download nothing or trip things up. You will need to create the Rows with the proper details or data attributes.
If you want to select specific Cells, consider this example: https://jqueryui.com/selectable/#display-grid
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.