使用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" }); 

我有一個索引名稱為“ completed”的復選框。 編輯此輸入時，我試圖運行ajax調用。 觸摸此復選框后，我什么也無法激發，甚至沒有警報。 我已嘗試瀏覽此頁面上的示例http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing，但是沒有任何效果。 有人可以幫我為復選框創建一個簡單的事件處理程序嗎？

Answer 1

創建一個自定義格式器，

向您添加班級復選框

將文檔上的更改事件綁定到類

    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 2

這個怎么樣？

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

您可以使用自定義格式化程序將功能綁定到復選框。 以下是我項目中的一些代碼片段，在這些代碼片段中，單擊復選框后，我使用此方法將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 }
      });
 }