JqGrid如何添加将日期发布到列的编辑类型复选标记？

Question

我需要有一个editype复选标记列，当checkmark被选中时，今天的日期会自动添加到复选标记旁边并在提交到单元格之后，如果未选中，则在editform上删除日期，并在提交时发送“null”以使单元格保持空白。我知道我可以使用使用

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" } 

但我不知道如何显示旁边的复选框（如PIC）的日期，然后将该日期添加到细胞上提交。请帮助。 我的代码，因为它现在有它的存在与答案更新：

`

<title>PWe</title> 


<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.3.custom.min.css" /> 

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/nhf.css" /> 

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> 

<script type="text/javascript"> 




$(function(){ 
     $("#list").jqGrid({ 
     url:'request.php', 
     editurl: "jqGridCrud.php", 
     datatype: 'xml', 
     mtype: 'GET', 
     height: 'AUTO', 
     width: 900, 
     scrollOffset:0, 
     hidegrid: false, 

     colNames:['id','Project', 'Assigned To','Dev','Approve','Due Date','Attachments','Notes','App','mydate2',""], 
     colModel :[ 
      {name:'id', index:'id', width:28, align: 'center'}, 
      {name:'name', index:'name', width:170, align:'left',editable:true, editoptions:{ 
       size:60} }, 
      {name:'id_continent', index:'id_continent', width:50, align:'right',editable:true,edittype:'select', 
      editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" },mtype:'POST' }, 

      {name:'lastvisit', index:'lastvisit', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',editable:true, edittype: 'text',mtype:'POST' ,  editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} , 


      {name:'cdate', index:'cdate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy', edittype: 'text',editable:true ,mtype:'POST' ,editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} , 

      {name:'ddate', index:'ddate', width:55, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:true, edittype: 'text',editoptions:{size:10, dataInit:function(elem){$(elem).datepicker({dateFormat:'m/d/yy'});}}} , 


      {name:'email', index:'email', width:50,align:'center',sortable:false,mtype:'POST',formatter:function(cellvalue, options, rowObject) { 
     if (cellvalue === undefined || cellvalue === null || cellvalue === 'NULL') { 
      return ''; // or just "" 
     } 
     return '<a href="' + cellvalue + '"target="_blank"><img src="file.png"> </a>'; 
    }}, 

      {name:'notes', index:'notes', width:100, align:'left',sortable:false, editable:true,edittype:'textarea',formatter:'link', editoptions:{ 
       rows:10,cols:60} }, 



    { name: "hello", index:'hello',width: 17, align: "right", formatter: "checkbox", 
      editable: true, 
      edittype: "checkbox", 
      editoptions: { 
       value: "Yes:No", 
       defaultValue: "Yes", 
       dataEvents: [ 
        { 
         type: "change", 
         data: { uncheckedDate: "" }, 
         fn: function (e) { 
          if ($(this).is(':checked')) { 
           var date = new Date(Date.now()), 
            strDate = (date.getMonth() + 1) + "/" + 
               date.getDate() + "/" + 
               date.getFullYear(); 
           $("#mydate").text(strDate); 
          } else { 
           $("#mydate").text(e.data.uncheckedDate); 
     } 
         } 
        } 
       ] 
      }}, 


     {name:'mydate2', index:'mydate2', width:40, align:'left',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm/d/yy',date:'true',editable:false} , 

      {name:'act',index:'act',width:30 ,align:'left', sortable:false,formatter: "actions",cellattr: function() { return ' title="Delete Project"'; }, 
    formatoptions: { 
     keys: true, 
     deltitle: 'delete', 
     delbutton: true, 
     editbutton:false, 
     delOptions: { 
      url: 'delete-perm.php', 
      afterShowForm: function ($form) { 
     $("#dData", $form.parent()).click(); 
    }, 
      msg: "Remove Selected Project?", 
      bSubmit: "Remove", 
      bCancel: "Cancel" 
     } 
    }}, 
     ], 
     pager: '#pager', 

     rowNum:30, 
     rowList:[30,40,80], 
     sortname: 'ddate', 
     sortorder: 'asc', 
     viewrecords: true, 
     gridview: true, 
     caption: 'Current Assignments', 


     ondblClickRow: function(rowid) { 

     $(this).jqGrid('editGridRow', rowid, 
          {width:550,Height:550,recreateForm:true,closeAfterEdit:true, 
          closeOnEscape:true,reloadAfterSubmit:true, modal:true,mtype:'post',top:350,left: 30});} 


       }); 


    jQuery.extend(jQuery.jgrid.nav, { 
      deltitle: '', 
      delcaption: 'Project Complete' 


     },{delicon: "ui-icon-circle-check",deltext: "Project Complete"}); 

     $("#list").jqGrid("navGrid", "#pager", { add: false, search: false, refresh:false,edit:false }).navButtonAdd('#pager',{ 


            caption:"Export to Excel", 
            buttonicon:"ui-icon-save", 
            onClickButton: function() { 
      jQuery("#list").jqGrid('excelExport', { url: 'ExportExcel.php' }); 
    }, 
            position:"last", 

           }); 
    jQuery.extend(jQuery.jgrid.edit, { 
    recreateForm: true, 
    beforeShowForm: function ($form) { 
    $("<span id='mydate'></span>").insertAfter("#hello"); 
    $("#hello").trigger("change"); // to set date 
    }, 
    onclickSubmit: function() { 
    return { 
    mydate2: $("#mydate").text() 
    } 
    }, 
    afterclickPgButtons: function() { 
    $("#hello").trigger("change"); // to set date 
    } }); 
     // setup grid print capability. Add print button to navigation bar and bind to click. 
     setPrintGrid('list','pager','Current Assignments'); 

    }); 

Answer 1

有来实现您的要求很多方面。第一个是edittype: "custom"的用法。它允许您以编辑的形式创建任意编辑元素。同样的方法可以在内联编辑或搜索对话框中使用。 The demo从the answer和this old one描述的更详细。

另一种方式更简单。可以只添加一个控件，例如<span>后面的复选框。人们可以填写范围并根据chackbox的更改进行更改。 The demo演示了这种方法。代码最重要的部分如下：

该网格具有可编辑列“关闭”edittype: "checkbox"。我使用表单编辑来编辑网格。表单编辑会创建编辑控件，其ID与name属性的值相同。因此，在编辑表单中编辑列“关闭”的复选框将具有id="closed"。里面beforeShowForm回调的我“封闭”的复选框后直接插入带id="mydate"额外<span>元素：

beforeShowForm: function() { 
    $("<span id='mydate'></span>").insertAfter("#closed"); 

    // we trigger change event on the chechbox only to execute once 
    // the custom event handler which fills the span #mydate 
    $("#closed").trigger("change"); 
} 

列的定义网格的“封闭”包含editoptions.dataEvents定义“变”事件的处理程序。事件处理程序填充基于复选框的状态id="mydate"跨度：

colModel: [ 
    ... 
    { name: "closed", width: 70, align: "center", formatter: "checkbox", 
     editable: true, 
     edittype: "checkbox", 
     editoptions: { 
      value: "Yes:No", 
      defaultValue: "Yes", 
      dataEvents: [ 
       { 
        type: "change", 
        data: { uncheckedDate: "9/11/1964" }, 
        fn: function (e) { 
         if ($(this).is(':checked')) { 
          var date = new Date(Date.now()), 
           strDate = (date.getMonth() + 1) + "/" + 
              date.getDate() + "/" + 
              date.getFullYear(); 
          $("#mydate").text(strDate); 
         } else { 
          $("#mydate").text(e.data.uncheckedDate); 
         } 
        } 
       } 
      ] 
     }, 
     stype: "select", 
     searchoptions: { 
      sopt: ["eq", "ne"], 
      value: ":Any;true:Yes;false:No" 
     } 
    }, 

作为结果的形式看起来像下面

更多编辑回调图片

afterclickPgButtons: function() { 
    $("#closed").trigger("change"); // to set date 
} 

用户点击下一个/上一个记录按钮后刷新日期复选框。

要从madate<span>与数据发送附加数据I使用onclickSubmit回调

onclickSubmit: function() { 
    return { 
     myDate: $("#mydate").text() 
    } 
} 

其中编辑形式的提交期间发送的时间作为myDate参数。