Here is the mocked up code that I came up with using jQuery. I make extensive use of is the predicate selector '$='. Which a very useful trick to get around injecting the ASP.NET client id into JavaScript.
var selectedCheckRow = 2; function itemToggleSelect(cb, e) { var checkAll = $("input[id$='CheckAll']"), chkVal = cb.checked, idVal = cb.id; if (!chkVal && checkAll.attr('checked')) { $(".selectAllMsg").hide(); selectAllPages('false'); checkAll.attr('checked', false); } // -- Shift-Click Select on Item Grid -- // if (!e) e = event; CurrentCheckRow = $("#" + idVal)[0].parentNode.parentNode.rowIndex; if (e.shiftKey) { ((CurrentCheckRow > selectedCheckRow) ? $("input[id$='chkAction']").slice(selectedCheckRow - 2, CurrentCheckRow - 2) // Selecting down : $("input[id$='chkAction']").slice(CurrentCheckRow - 2, selectedCheckRow - 2) // Selecting up ).attr('checked', chkVal) } // Save checkbox row selectedCheckRow = $("#" + idVal)[0].parentNode.parentNode.rowIndex; } //Expects: 'true' if all pages should be selected // 'false' if select only viewable items/page. function selectAllPages(allPages) { $(".selectAllPages").val(allPages); var selectAll = $(".selectAllMsg > td"); selectAll.html((allPages == "true") ? "All items on all pages have been selected. <a href='#' onclick='ToggleAll(false);return false;'>Clear Selection.</a>" : "All items on this page are selected. <a href='#' onclick='selectAllPages(true);return false;'>Select All Items on All Pages.</a>"); } function ToggleAll(cb) { var msg = $(".selectAllMsg"), selectAll, chkVal = cb.checked, idVal = cb.id; if (chkVal) { selectAll = $(".selectAllMsg > td"); selectAll.html("All items on this page are selected. <a href='#' onclick='selectAllPages(true);return false;'>Select All Items on All Pages.</a>"); msg.slideDown(0); } else { msg.hide(); selectAllPages('false'); } $("input[id$='chkAction'],input[id$='CheckAll']").attr('checked', chkVal); }
Demo
The demo code (view the source to see) is setup to mimic an GridView control. To make this demo function you can click a check box, perhaps '3' and then shift+click another check box, perhaps '7'. Not overly complicated, but could definitely save time over developing from scratch.
Select All | |
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 |
No comments:
Post a Comment