Javascript JqGrid如何添加edittype复选标记以将日期发布到列？

我需要有一个editypecheckmark列，当选中checkmark时，今天的日期将自动添加到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');

    });

PWe
$（函数（）{
$（“#列表”）.jqGrid({
url:'request.php'，
editurl:“jqGridCrud.php”，
数据类型：“xml”，
mtype:'获取'，
高度：“自动”，
宽度：900，
滚动偏移量：0，
希德格里德：错，
colNames:['id'、'Project'、'Assigned To'、'Dev'、'Approve'、'Due Date'、'Attachments'、'Notes'、'App'、'mydate2'、''，
colModel:[
{名称：'id'，索引：'id'，宽度：28，对齐：'center'}，
{名称：'name'，索引：'name'，宽度：170，对齐：'left'，可编辑：true，可编辑选项：{
尺寸：60}，
{名称：'id_Continental'，索引：'id_Continental'，宽度：50，对齐：'right'，可编辑：true，编辑类型：'select'，
编辑选项：{value:“亨利：亨利；拉蒙：拉蒙；保罗：保罗”}，mtype:“波斯特”}，
{name:'lastvisit'，index:'lastvisit'，width:55，align:'right'，formatter:'date'，srcformat:'yyyy-mm-dd'，newformat:'m/d/yy'，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'，edit: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'，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==undefined | | cellvalue===null | | cellvalue===null'）{
返回“”；//或仅返回“”
}
返回“”；
}},
{name:'notes'，index:'notes'，width:100，align:'left'，sortable:false，edit:true，edittype:'textarea'，formatter:'link'，editoptions:{
行：10，列：60}，
{名称：“你好”，索引：“你好”，宽度：17，对齐：“右”，格式化程序：“复选框”，
是的，
编辑类型：“复选框”，
编辑选项：{
值：“是：否”，
默认值：“是”，
数据事件：[
{
键入：“更改”，
数据：{uncheckedDate:}，
fn：功能（e）{
如果（$（this）.is（':checked'））{
var date=新日期（date.now（）），
标准日期=（date.getMonth（）+1）+“/”+
date.getDate（）+“/”+
date.getFullYear（）；
$（“#mydate”）.text（标准日期）；
}否则{
$（“#mydate”）.text（e.data.uncheckedDate）；
}
}
}
]
}},
{name:'mydate2'，index:'mydate2'，width:40，align:'left'，格式化程序：'date'，srcformat:'yyyy-mm-dd'，newformat:'m/d/yy'，date:'true'，可编辑：false}，
{name:'act'，index:'act'，width:30，align:'left'，sortable:false，格式化程序：“actions”，cellattr:function（）{return'title=“Delete Project”；}，
格式选项：{
凯斯：没错，
deltitle:“删除”，
德尔巴顿：是的，
编辑按钮：错误，
删除选项：{
url:“删除perm.php”，
余波形式：函数（$form）{
$（“#dData”，$form.parent（））。单击（）；
},
msg：“是否删除所选项目？”，
b提交：“删除”，
取消：“取消”
}
}}, 
],
寻呼机：“#寻呼机”，
rowNum:30，
行列表：[30,40,80]，
sortname:'ddate'，
排序器：“asc”，
viewrecords：是的，
gridview：没错，
标题：“当前分配”，
ondblClickRow:函数（rowid）{
$（this）.jqGrid（'editGridRow'，rowid，
{宽度：550，高度：550，重新创建表单：true，closeAfterEdit:true，
closeOnEscape:true，reloadAfterSubmit:true，modal:true，mtype:'post'，top:350，left:30}）；}
});
extend（jQuery.jgrid.nav{
deltitle:“”，
delcaption:“项目完成”
}，{delicon:“ui图标圆检查”，deltext:“项目完成”}）；
$（“#列表”）.jqGrid（“navGrid”，“#pager”，{add:false，search:false，refresh:false，edit:false}）.navButtonAdd（“#pager”{
标题：“导出到Excel”，
按钮图标：“ui图标保存”，
onclick按钮：函数（）{
jQuery（“#list”）.jqGrid（'excelExport'，{url:'ExportExcel.php'}）；
}, 
位置：“最后”，
});
extend（jQuery.jgrid.edit{
再现形式：正确，
beforeShowForm:函数（$form）{
$（“”）。插入后面的（“#您好”）；
$（“#您好”）.trigger（“change”）；//设置日期
},
onclickSubmit:函数（）{
返回{
mydate 2:$（“#mydate”）.text（）
}
},
点击按钮后：功能（）{
$（“#您好”）.trigger（“change”）；//设置日期
} });
//设置网格
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");
}

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
}

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