Événement de changement de case jqgrid

J'ai des valeurs vraies / fausses dans ma base de données. Je souhaite les mettre à jour avec la case à cocher dans jqgrid. Une fois que la valeur est définie sur true, elle demeurera vraie et ne devrait pas changer. Jetez un coup d'oeil à mon modèle de colonne:

{ name : 'available', width : 12, resizable: true, editable: true, align: 'center', edittype:'checkbox', formatter: "checkbox", formatoptions: {disabled : false}, classes:'check', editrules:{required:false}, editoptions:{size:39,value:"True:False"} } 

J'essaie de capturer l'événement lorsque la case à cocher est cochée, actuellement elles sont toutes désactivées, jusqu'à présent, j'ai essayé:

 jq(".check input").each(function(){ jq(this).click(function(){ aler("works"); }); }); jq("input[type='checkbox']").change(function(){ alert("works"); }); jq(":checkbox").parent().click(function(evt) { if (evt.target.type !== 'checkbox') { var $checkbox = jq(":checkbox", this); $checkbox.attr('checked', !$checkbox.attr('checked')); $checkbox.change(); alert(""); } }); 

Aucun de ces travaux, je suis coincé, je ne sais pas ce qu'il faut essayer.

Lorsque vous contrôlez le code de la case à cocher avec le firebug, cela ressemble à ceci:

 <input type="checkbox" offval="no" value="false"> 

L'utilisation du formateur personnalisé est l'une des possibilités. On peut aussi utiliser un style discret de liaison

Le premier définit

 var grid = $("#list"), getColumnIndexByName = function(columnName) { var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length; for (; i<l; i++) { if (cm[i].name===columnName) { return i; // return the index } } return -1; }, disableIfChecked = function(elem){ if ($(elem).is(':checked')) { $(elem).attr('disabled',true); } }; 

Ensuite, on peut utiliser le dans le loadComplete le code comme

 loadComplete: function() { var i=getColumnIndexByName('closed'); // nth-child need 1-based index so we use (i+1) below $("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > input", this).click(function(e) { disableIfChecked(this); }).each(function(e) { disableIfChecked(this); }); } 

Voir ici la démo correspondante.

Vous pouvez créer un formateur personnalisé. Dans votre grille,

 formatter: cboxFormatter, 

Ensuite, définissez la fonction,

 function cboxFormatter(cellvalue, options, rowObject) { return '<input type="checkbox"' + (cellvalue ? ' checked="checked"' : '') + 'onclick="alert(' + options.rowId + ')"/>'; } 

Vous pouvez utiliser onclick pour effectuer votre tâche ou appeler une fonction.

Cela a fonctionné pour moi:

  // Listen for Click Events on the 'Process' check box column $(document).on("click", "td[aria-describedby='grdOrders_Process']", function (e) { var checked = $(e.target).is(":checked") var rowId = $(e.target).closest("tr").attr("id") rowData = jQuery("#grdOrders").getRowData(rowId); alert("Checked: " + checked) alert("OrderNo: " + rowData.OrderNo); alert("Name: " + rowData.Name); });