prettyCheckable sur jqGrid ne fonctionne pas

Question

J'ai une table jqGrid (qui convertit une table en grille) avec des cases à cocher à sélection multiple. Pour personnaliser le style de case à cocher j'ai utilisé prettyCheckable, qui génère une étiquette et un ancre (href) et un conteneur div pour l'entrée de case à cocher (qui est caché et couvert par l'étiquette et a). Mon problème est que quand je vérifie l'étiquette ne fonctionne pas, à la place quand je vérifie l'entrée fonctionne.

<div class="clearfix prettycheckbox labelright blue " id="aui_11140"> 
    <input role="checkbox" id="rs" class="cbx" type="checkbox" style="display: none;"> 
    <label for="rs" class="checked" id="aui_11139"> 
    </label> 
</div> 

réglage prettyCheckable pour les entrées:

$("input[type=checkbox]").change(function() { 
     $(this).triggerHandler("click"); 
    }).prettyCheckable(); 

Et voici mes paramètres jqGrid:

$(document).ready(function() { 
    $('#searchForm').ajaxForm(function() { 
     var _data = $('#searchForm').serialize(); 
     $('#ResultsTable').jqGrid().setGridParam({url: '${searchUrl}' + _data}).trigger("reloadGrid") 
     return true; 
    }); 
    jsonTable('ResultsTable', 'ResultsPager', '${searchUrl}', 'searchForm', 
     {id: 'code'}, 
     ['Code', 'Description', 'CF'], 
     [{name: 'code', index: 'code', width: 55}, 
     {name: 'description', index: 'description', width: 90}, 
     {name: 'CF', index: 'CF', width: 80}, 
     function(id) { 
      var selRows = $(this).jqGrid('getGridParam', 'selarrrow'); 
      $('#edit').toggle(selRows.length == 1); 
      $('#delete').toggle(selRows.length > 0); 
      $('#editForm #code').val(selRows); 
      $('#deleteForm #code').val(selRows); 
     }, 
     function(aSel, selected) { 
      $('#edit').toggle(false); 
      $('#delete').toggle(selected); 
      if (selected) { 
       $('#editForm #code').val(selRows); 
       $('#deleteForm #code').val(selRows); 
      } 
     }, 
     true 
    )  
}); 

Pourquoi cela ne fonctionne pas?

ps. j'ai édité le prettyCheckable.js et enlevé le <a> n'est donc pas généré. Et j'ai renommé le CSS de .prettycheckbox a {} à .prettycheckbox label {}.

Answer 1

Le plugin utilise prettyCheckable code comme

input.prop('checked', true).change(); 

de transmettre les modifications de l'état de la case à cocher. De l'autre côté, jqGrid contient uniquement le handle d'événement click (voir the line).

Ce que vous pouvez faire est de déclencher l'événement click en cas d'événement change. Par exemple, laissez-nous avoir une grille avec id="list"

Puis le id de la case à cocher pour sélectionner tous les éléments sera cb_list ("cb_" ajouté avec l'ID de grille). Donc, vous utilisez probablement le code comme

$("#cb_list").prettyCheckable(); 

Je suggère que vous modifiez le code à la suivante

$("#cb_list").change(function() { 
    $(this).triggerHandler("click"); 
}).prettyCheckable(); 

Il devrait résoudre votre problème.