Add checkboxes in a jqGrid on the basis of value retrieved through the json

I 开发者_如何学编程have a json which returns some strings as "true" or "false" Now, on the basis of the above values, the checkbox state should behave.

For exmaple: If true is retrieved for that column, the checkbox state should be on. If false is retrieved for that column, the checkbox state should be off.

Can we do this manipulation in jQuery-jqGrid? Can someone help me with some sample code?

Have a look at this fiddle.

During loadComplete:

loadComplete: function(data) {
    if (data.rows.length > 0) {
        for (var i = 0; i < data.rows.length; i++) {
            if (data.rows[i].columnToCheck == true) {
                jQuery("#list47").setSelection(data.rows[i].id, true);
            }
        }
    }
},

If I understand you correct you need just include formatter:'checkbox' property in the definition of the corresponding columns of the colModel.

By the way if you use formatter:'checkbox' the input can be "0" or "1" instead of "false" and "true". If you have many boolean data in the JSON data the usage of "0" and "1" can reduce the size of data which you transfer. The formatter:'checkbox' interpret (case insensitive) the data "false", "0", "no" "off" as checked and all other non-empty values as unchecked.

I finaly got this code for my jqGrid checkboxes (function received json grid data):

     success: function(gridData) {
            lastVhostSel = -1;
            reloadGrid("#vhostTable", gridData);
            var vhostTable = $("#vhostTable");
            var listIds = vhostTable.getDataIDs();
            for (var i = 0; i < listIds.length; i++) {
                var rowId = listIds[i];
                rowData=vhostTable.getRowData(rowId);
                var chbx = vhostTable.find('#'+rowId+' input[type=checkbox]');
                var data = gridData[rowId-1];  // get json row

                //  change checkbox, based on json:
                chbx.prop('checked',data.isVpn);
                chbx.prop('disabled',(!data.isVpn || !data.isIp));

                // add change event handler
                chbx.change(function(){
                    lastVhostSel = -1;
                    vhostTable.setSelection(this.parentNode.parentNode.id, true);
                });
            }

            function reloadGrid(gridId, gridData){
                $(gridId).jqGrid('clearGridData');
                $(gridId).jqGrid('setGridParam', {data: gridData}).trigger('reloadGrid');
            }