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}

自定义格式化程序功能：

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

创建自定义格式化程序

向您添加一个类复选框

将文档上的更改事件绑定到类

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

在您的fomatter中，您可以添加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']+ >'; }

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

3 个答案: