关闭DatePicker时，jqgrid保存单元格编辑 [英] jqgrid Save Cell Edit When DatePicker Is Closed

问题描述

我有以下JQGrid

I have the following JQGrid

    $("#requestTable").jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    altRows: 'true',
    colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],

    colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'RequestDate', index: 'RequestDate', width: 100 },
                { name: 'FullName', index: 'FullName', width: 125, sortable: false },
                { name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
                { name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
                { name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
                     editoptions:{
                          dataInit:function(element){
                              $(element).datepicker();
                          }
                     }

                 },
                { name: 'Email', index: 'Email', width: 110, sortable: false }

            ],
    cellEdit:true,
    cellurl:cellurl,
    pager: '#pager',
    rowNum: 50,
    rowList: [ 25, 50, 75, 100],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    height: "100%"

});

});

如您所见，DealerContactDate单元格可以使用日期选择器进行编辑. 无论如何，一旦在日期选择器中选择了一个日期并将其关闭，jqgrid便会保存数据? 现在，用户必须从日期选择器中选择一个日期.然后再次选择该文本框，然后按Enter，这太复杂了. 谢谢！

As you can see, the DealerContactDate Cell is editable using a datepicker. Is there anyway to have jqgrid save the data as soon as a date is selected in the datepicker and it closes? right now the use has to select a date from the datepicker. then select that textbox again and hit enter, which is just too complicated. Thanks!

更新: 我在jqrid外部为行和单元格创建了两个变量，然后在网格上的afterEditCell事件中设置了这些变量.然后在datepickers的onSelect事件中将它们传递给saveCell函数，它似乎可以正常工作.

Update: I created two variables for row and cell outside of jqrid, then on the grids afterEditCell event set these variables. then on the datepickers onSelect event passed these to the saveCell function and it seems to work.

 var saverow = 0;

var savecol = 0;
$("#requestTable").jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    altRows: 'true',
    colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],

    colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'RequestDate', index: 'RequestDate', width: 100 },
                { name: 'FullName', index: 'FullName', width: 125, sortable: false },
                { name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
                { name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
                { name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
                    editoptions: {
                        dataInit: function (element) {
                            $(element).datepicker({
                                onSelect: function () {
                                    $("#requestTable").jqGrid("saveCell", saverow, savecol);
                                }
                            });
                        }
                    }

                },
                { name: 'Email', index: 'Email', width: 110, sortable: false }

            ],
    cellEdit: true,
    pager: '#pager',
    rowNum: 50,
    rowList: [25, 50, 75, 100],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    height: "100%",
    cellurl: cellurl,
    afterEditCell: function (id, name, val, IRow, ICol) {
        saverow = IRow;
        savecol = ICol;
    }

});

推荐答案

您应该可以使用 onSelect() 事件与

You should be able to use the onSelect() event from the datePicker in combination with the saveRow() from jqGrid. Something like:

   $(element).datepicker({
      onSelect: function(dateText, inst) { 
          var $input = inst.input; // the datepicker input
          var $row = $input.parents("tr"); 
          $("#requestTable").jqGrid('saveRow',$row.attr("id"), false); // this would probably need some work, I have no experience with jqGrid
   });

这篇关于关闭DatePicker时，jqgrid保存单元格编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！