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

これはいかがですか？

$("#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 2

カスタムフォーマッタを使用して、機能をチェックボックスにバインドすることができます。ここでは、チェックボックスがクリックされたときにこのメソッドを使用してデータベースにajax呼び出しを送信する、私のプロジェクトのスニペットを示します。

チェックボックス列定義：

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

カスタムフォーマッタ機能：AJAX呼び出し含む

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

そして最後に機能：

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 3

は

、カスタムフォーマッタを作成します。

あなたがなど同上、colNameに似た属性を追加することができますし、変更{name:'completed',index:'completed', width:80, align:"center", sortable:true, formatter: "checkbox", formatoptions: {disabled : false}

doSomethingの

にretirevedすることができますあなたのfomatterでクラス

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

に文書にyoutは、チェックボックスに

バインドの変更イベントをクラスの追加

へ

{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']+ >'; }