prettyCheckable sur jqGrid Multiselect

Question

J'ai un tableau jqGrid avec des cases à cocher multi-sélection que j'ai personnalisé avec CSS et prettyCheckable.

Pour personnaliser toutes les cases de ma table, je mets .prettyCheckable() comme suit:

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

mais cela ne fonctionne pas. Seule la première case à cocher a le style.

donc j'ai essayé d'insérer la fonction .prettyCheckable() dans loadComplete de jqGrid, et comme suggéré par Oleg#here, en ajoutant la classe vérifiée <a>.

Voici mes paramètres jqGrid:

$(document).ready(function() { 
    $('#searchForm').ajaxForm(function() { 
     var _data = $('#searchForm').serialize(); 
     $('#ResultsTable').jqGrid().setGridParam({ 
      url: '${searchUrl}' + _data, 
      loadComplete: function() { 
       $(this).find("input.cbox").prettyCheckable(); 
      } 
     }).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); 
      //$("#jqg_" + $.jgrid.jqID(this.id + "_" + id)).next("a").toggleClass('checked'); 
     }, 
     function(aSel, selected) { 
      $('#edit').toggle(false); 
      $('#delete').toggle(selected); 
      if (selected) { 
       $('#editForm #code').val(selRows); 
       $('#deleteForm #code').val(selRows); 
      } 
     }, 
     true 
    )  
}); 

mais aussi avec cela ne fonctionne pas, comment puis-je résoudre ce problème?

J'ai créé une petite démo ici: jsfiddle.net/LStvX/1
Toute aide est appréciée, merci!

Answer 1

Tout d'abord je trouve intéressante l'intégration d'autres plugins dans jqGrid. Je n'ai pas utilisé prettyCheckable auparavant. Après même analyse de la façon dont fonctionne prettyCheckable j'ai créé the demo qui démontrent un exemple d'une telle intégration. Les résultats ressemblent sur l'image ci-dessous

Pour comprendre le code il faut comprendre que prettyCheckable convertir fragment HTML original de la cellule avec case multiselect

structure plus complexe

Je ne trouve pas bon que prettyCheckable toujours créer vide <label> élément qui augmentent la hauteur de la colonne. J'ai donc ajouté le code qui rend tout l'élément <label> caché.

Le problème suivant est que prettyCheckable utilise élément <a> avec la classe option "checked" pour chechboxes et informer la case d'origine (qui sont cachés après l'initialisation prettyCheckable) par événement change, mais jqGrid attendent click événement sur la ligne ou sur la case à cocher et n'a aucune réaction sur l'événement change. Je saute quelques détails techniques moins intéressants maintenant.Parties les plus importantes du code de la démo, vous trouverez ci-dessous

$("#list").jqGrid({ 
    ... 
    multiselect: true, 
    multiselectWidth: 28, 
    onSelectAll: function (aRowids, status) { 
     var i, l = aRowids.length, $a, 
      selector = "#jqg_" + $.jgrid.jqID(this.id) + "_"; 

     for (i = 0; i < l; i++) { 
      $a = $(selector + $.jgrid.jqID(aRowids[i])).next("a"); 
      if (status) { 
       $a.addClass("checked"); 
      } else { 
       $a.removeClass("checked"); 
      } 
     } 
    }, 
    beforeSelectRow: function (rowid, e) { 
     if (e.target.nodeName.toUpperCase() === "A" && 
       $(e.target).prev("input").hasClass("cbox")) { 
      $(e.target).prev("input").click(); 
     } 
     return true; 
    }, 
    onSelectRow: function (rowid, state) { 
     var $a = $("#jqg_" + $.jgrid.jqID(this.id + "_" + rowid)).next("a"); 
     if (state) { 
      $a.addClass("checked"); 
     } else { 
      $a.removeClass("checked"); 
     } 
    }, 
    loadComplete: function() { 
     var $checkboxes = $(this).find("input.cbox"); 
     $checkboxes.prettyCheckable(); 
     $checkboxes.siblings("label").hide(); 
    } 
}); 
$("#cb_" + $.jgrid.jqID($grid[0].id)).change(function() { 
    $(this).triggerHandler("click"); 
}).prettyCheckable(); 
$("#cb_" + $.jgrid.jqID($grid[0].id)).siblings("label").hide(); 

je paramètres CSS supplémentaires (voir the answer) pour augmenter la hauteur des en-têtes de colonnes

th.ui-th-column div { 
    white-space: normal !important; 
    height: auto !important; 
}