当 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 单元格可使用日期选择器进行编辑.无论如何，只要在 datepicker 中选择日期并关闭，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() 事件来自 datePicker 与 saveRow() 来自 jqGrid.比如:

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屋！