JQgrid checkbox in onclick update database

Question

I have a checkbox column in my JqGrid that loads from the database, so it is either checked or not checked at boot time.

What I want: if the checkbox is checked or disabled by the user, I want to update the database on the same one. I do not want the user to press the enter button or anything else. only 1 click and send the action to DB

name: 'Aktiv', index: 'Aktiv', width: 100, edittype: 'checkbox', align: 'center', formatter: "checkbox", editable: true, formatoptions: {disabled: false}

Answer 1

You can set the click event handler inside loadComplete :

 loadComplete: function () { var iCol = getColumnIndexByName ($(this), 'Aktiv'), rows = this.rows, i, c = rows.length; for (i = 1; i < c; i += 1) { $(rows[i].cells[iCol]).click(function (e) { var id = $(e.target).closest('tr')[0].id, isChecked = $(e.target).is(':checked'); alert('clicked on the checkbox in the row with id=' + id + '\nNow the checkbox is ' + (isChecked? 'checked': 'not checked')); }); } } 

Where

 var getColumnIndexByName = function(grid, columnName) { var cm = grid.jqGrid('getGridParam', 'colModel'), i, l; for (i = 1, l = cm.length; i < l; i += 1) { if (cm[i].name === columnName) { return i; // return the index } } return -1; }; 

Instead of alert you should use jQuery.ajax to send information to the server about updating the state of the flag.

You can see the demo here .

Answer 2

Minor correction in loadComplete: function (). in the demo, you may find that even after the check box is selected, if you select the check box outside this cell, the value will change to false from true.

To avoid this, just focus only on the checkbox by following these steps.

 for (i = 1; i < c; i += 1) { $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { var id = $(e.target).closest('tr')[0].id, isChecked = $(e.target).is(':checked'); alert('clicked on the checkbox in the row with id=' + id + '\nNow the checkbox is ' + (isChecked? 'checked': 'not checked')); }); } 

and thanks for the answer :-) (@Oleg) helped me a lot .. during, of course ..;)

Answer 3

To change the values ​​of another column based on the click of a flag

 var weightedAvgPriceIndex = getColumnIndexByName($(this), 'WeightedAveragePrice'), rows = this.rows, i, c = rows.length; for (i = 1; i < c; i += 1) { $(('input[type="checkbox"]'),rows[i].cells[iCol]).click(function (e) { var id = $(e.target).closest('tr')[0].id; isChecked = $(e.target).is(':checked'); var x = $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(); $('#' + id + ' td:eq(' + weightedAvgPriceIndex + ')').text(Math.abs(x) + 10); }); }