встроенное редактирование с помощью jqgrid.Я застрял

Question

вот моя сетка:

$("#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" }); 

У меня есть флажок с именем индекса "завершено". Я пытаюсь запустить AJAX-вызов, когда этот вход редактируется. Я не могу заставить что-либо выстрелить, когда касаюсь этого флажка, даже предупреждения. Я пробовал работать с примером на этой странице http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing, но ничего не работает. Может кто-нибудь помочь мне создать простой обработчик событий для флажка?

Answer 1

Вы можете использовать пользовательский форматировщик, чтобы привязать функцию к флажку. Вот некоторые фрагменты из моего проекта, в которых я использовал этот метод для отправки ajax-вызова в базу данных при нажатии флажка.

Определение столбца флажка:

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

Пользовательская функция форматирования:

//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' />"; 
  }

И, наконец, функция, содержащая вызов ajax:

 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 }
      });
 } 

Answer 2

Создать пользовательский форматер,

Флажок "Добавить класс в yout"

Привязать событие изменения документа к классу

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

В окне поиска можно добавить атрибуткак Id, colName и т. д., и может быть переведен в DoSomeThing

Изменить {name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: "checkbox", formatoptions: {disabled : false} на

{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 3

Как насчет этого?

$("#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')});