javascript - JqG​​rid 如何添加将日期发布到列的编辑类型复选标记？

Question

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

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

但我不知道如何在复选框旁边显示日期(如图片)，然后在提交时将该日期添加到单元格中。请帮助。 我的代码目前存在，已更新答案:

`

<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> 在复选框之后。人们可以填充跨度并根据复选框的变化来更改它。 The demo演示了该方法。代码中最重要的部分如下:

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

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它定义了“change”事件的处理程序。事件处理程序用 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>我用过onclickSubmit回调

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

将日期发送为 myDate提交编辑表单时的参数。