Bladeren bron

Add checkbox range selection (#4573)

Emmanuel Vella 7 jaren geleden
bovenliggende
commit
8652bca0de
3 gewijzigde bestanden met toevoegingen van 63 en 0 verwijderingen
  1. 8 0
      Resources/doc/reference/action_list.rst
  2. 5 0
      Resources/doc/reference/form_types.rst
  3. 50 0
      Resources/public/Admin.js

+ 8 - 0
Resources/doc/reference/action_list.rst

@@ -627,3 +627,11 @@ in your admin services:
         arguments: [~, Sonata\AdminBundle\Entity\News, ~]
         tags:
             - { name: sonata.admin, manager_type: orm, group: admin, label: News, show_mosaic_button: false }
+
+Checkbox range selection
+------------------------
+
+.. tip::
+
+    You can check / uncheck a range of checkboxes by clicking a first one,
+    then a second one with shift + click.

+ 5 - 0
Resources/doc/reference/form_types.rst

@@ -565,6 +565,11 @@ You can listen to this event to trigger custom JavaScript (eg: add a calendar wi
 **TIP**: Setting the 'required' option to true does not cause a requirement of 'at least one' child entity.
 Setting the 'required' option to false causes all nested form fields to become not required as well.
 
+.. tip::
+
+    You can check / uncheck a range of checkboxes by clicking a first one,
+    then a second one with shift + click.
+
 sonata_type_native_collection (previously collection)
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 

+ 50 - 0
Resources/public/Admin.js

@@ -25,6 +25,7 @@ var Admin = {
         Admin.add_filters(subject);
         Admin.setup_select2(subject);
         Admin.setup_icheck(subject);
+        Admin.setup_checkbox_range_selection(subject);
         Admin.setup_xeditable(subject);
         Admin.setup_form_tabs_for_errors(subject);
         Admin.setup_inline_form_errors(subject);
@@ -105,6 +106,55 @@ var Admin = {
             });
         }
     },
+    /**
+     * Setup checkbox range selection
+     *
+     * Clicking on a first checkbox then another with shift + click
+     * will check / uncheck all checkboxes between them
+     *
+     * @param {string|Object} subject The html selector or object on which function should be applied
+     */
+    setup_checkbox_range_selection: function(subject) {
+        Admin.log('[core|setup_checkbox_range_selection] configure checkbox range selection on', subject);
+
+        var previousIndex,
+            useICheck = window.SONATA_CONFIG && window.SONATA_CONFIG.USE_ICHECK
+        ;
+
+        // When a checkbox or an iCheck helper is clicked
+        jQuery('tbody input[type="checkbox"], tbody .iCheck-helper', subject).click(function (event) {
+            var input;
+
+            if (useICheck) {
+                input = jQuery(this).prev('input[type="checkbox"]');
+            } else {
+                input = jQuery(this);
+            }
+
+            if (input.length) {
+                var currentIndex = input.closest('tr').index();
+
+                if (event.shiftKey && previousIndex >= 0) {
+                    var isChecked = jQuery('tbody input[type="checkbox"]:nth(' + currentIndex + ')', subject).prop('checked');
+
+                    // Check all checkbox between previous and current one clicked
+                    jQuery('tbody input[type="checkbox"]', subject).each(function (i, e) {
+                        if (i > previousIndex && i < currentIndex || i > currentIndex && i < previousIndex) {
+                            if (useICheck) {
+                                jQuery(e).iCheck(isChecked ? 'check' : 'uncheck');
+
+                                return;
+                            }
+
+                            jQuery(e).prop('checked', isChecked);
+                        }
+                    });
+                }
+
+                previousIndex  = currentIndex;
+            }
+        });
+    },
 
     setup_xeditable: function(subject) {
         Admin.log('[core|setup_xeditable] configure xeditable on', subject);