Question

我需要有一个editype复选标记列，当今天选中复选标记时，会自动添加复选标记旁边的日期，并在提交到单元格后，如果未选中，则会在editform上删除日期并在提交后发送＆＃34;空＆＃34;将单元格留空我知道我可以使用

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

但我不知道如何在复选框旁边显示日期（如pic），然后在提交时将该日期添加到单元格。请帮忙。 Date added to edit project and on Submit date sent to column 我目前的代码存在更新，答案为：

`

<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描述的更详细。

另一种方式更容易。可以在复选框之后再添加一个控件，例如 。可以填充跨度并根据chackbox的变化进行更改。 The demo演示了这种方法。代码中最重要的部分如下：

网格具有可编辑的列＆＃34;已关闭＆＃34;与edittype: "checkbox"。我使用表单编辑来编辑网格。表单编辑会创建编辑控件，其中ID与name属性的值相同。因此，用于编辑列的复选框＆＃34;已关闭＆＃34;在编辑表单中将包含id="closed"。在beforeShowForm回调内部，我会在复选框＆＃34;关闭＆＃34;后直接插入元素和id="mydate"元素：

beforeShowForm: function () { $("").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"); }

列的定义＆＃34;已关闭＆＃34;网格包含editoptions.dataEvents，它定义了＆＃34;更改＆＃34;的处理程序。事件。事件处理程序根据复选框的状态使用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 的数据发送包含onclickSubmit回拨
的数据的其他数据
onclickSubmit: function () { return { myDate: $("#mydate").text() } }

在提交编辑表单期间将日期作为myDate参数发送。

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

1 个答案:

JqG​​rid如何添加将日期发布到列的edittype复选标记？

1 个答案:

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