使用jqgrid进行内联编辑。 我被卡住了

Question

here is my grid:

$("#list2").jqGrid({ 
    url:baseURL + 'contactManager/contactActivity/getActivity/' + contactsID + '/1', 
    datatype: "json", 
    colNames:['Type','Scheduled', 'Created', 'Comp','Description','Assigned To'], 
    colModel:[ 
        {name:'type',index:'type', width:55}, 
        {name:'scheduledDate',index:'scheduledDate', width:90}, 
        {name:'createdDate',index:'createdDate', width:100},
        {name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: "checkbox", formatoptions: {disabled : false}, editable: true, edittype:"checkbox"},
        {name:'description',index:'description', width:80,align:"right"}, 
        {name:'assignedID',index:'assignedID', width:150, sortable:false} 
    ], 
    rowNum:10, 
    rowList:[10,20,30],
    pager: '#pager2', 
    sortname: 'type', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"Completed" }); 

I have a checkbox with the index name "completed." I am trying to run an ajax call when this input is edited. I cannot get anything to fire when I touch this checkbox, not even an alert. I have tried working through the example on this page http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing but nothing is working. Can someone help me create a simple event handler for the checkbox?

Answer 1

Create a custom formatter,

Add a Class to yout check box

Bind change Event on document to class

    jQuery(document).on("change", ".YourCheckBoxClass", function () {
    DoSomeThing(this);
});

In Your fomatter you can add attribute like Id, colName etc and can be retireved into DoSomeThing

Change {name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: "checkbox", formatoptions: {disabled : false} to

{name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: Mycheckbox}

function Mycheckbox(cellvalue, options, rowObject) { return '<input type="checkbox" class="YourClass" id=cb'+rowObject['rowId']+ >'; }

Answer 2

How about this?

$("#list2").jqGrid({ 
    url:baseURL + 'contactManager/contactActivity/getActivity/' + contactsID + '/1', 
    datatype: "json", 
    colNames:['Type','Scheduled', 'Created', 'Comp','Description','Assigned To'], 
    colModel:[ 
        {name:'type',index:'type', width:55}, 
        {name:'scheduledDate',index:'scheduledDate', width:90}, 
        {name:'createdDate',index:'createdDate', width:100},
        {name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: "checkbox", formatoptions: {disabled : false}, editable: true, edittype:"checkbox"},
        {name:'description',index:'description', width:80,align:"right"}, 
        {name:'assignedID',index:'assignedID', width:150, sortable:false} 
    ], 
    rowNum:10, 
    rowList:[10,20,30],
    pager: '#pager2', 
    sortname: 'type', 
    viewrecords: true, 
    sortorder: "desc", 
    caption:"Completed"
})
.find('input[name=completed]').bind('onchange', function() {alert('clicked')});

Answer 3

you can use a custom formatter to bind a function to the checkbox. Here are some snippets from my project where I used this method to send an ajax call to the database when the checkbox is clicked.

Checkbox column definition:

{ name: 'CoreClient', index: 'CoreClient', editable: true, align: 'center', edittype: 'checkbox', formatter: checkboxFormatter, editoptions: { value: "Y:N" }, formatoptions: { disabled: false }, sortable: true}

Custom formatter function:

//checkboxFormatter to wire onclick event of checkbox 
  function checkboxFormatter(cval, opts, rowObj) { 
      cval = cval + ""; cval = cval.toLowerCase(); 
      var bchk = cval.search(/(false|0|no|off|n)/i) < 0 ? "checked=\"checked\"" : ""; 
      return "<input type='checkbox' onclick=\"ajaxSaveParent('" + opts.rowId + "', this);\" " + bchk + " value='" + cval + "' offval='no' />"; 
  }

And lastly the function containing the ajax call:

 function ajaxSaveParent(rowid, curCheckbox) {
        var val = curCheckbox.checked ? "Y" : "N";

        $.ajax({
          type: 'POST',
          url: "DataService.asmx/Update",
          data: { id: rowid, yesno: val },
          success: function (data, textStatus) {
              if (textStatus == "success") {
                  //success code here
              }
          },
          error: function (data, textStatus) { //error code here }
      });
 }