【问题标题】:jqGrid InlineEdit "ENTER" key does not trigger "aftersavefunc" event?jqGrid InlineEdit“ENTER”键不触发“aftersavefunc”事件?
【发布时间】:2014-08-18 13:16:57
【问题描述】:

虽然this question 类似,但对我的情况没有帮助。我有几个 jqGrids 在模式中打开,都启用了内联编辑,keys: true,并定义了一个非常简单的 aftersavefunc 函数。但是,当使用 ENTER 键而不是单击保存图标时,我没有看到 aftersavefunc 事件触发。一些网格相当大,使用 KEYBOARD 笔划对于节省时间和提高准确性至关重要。这是一个已知问题还是有办法欺骗 jqGrid 认为保存图标已被点击?

以下是我的 jqGrid 定义(之前)。任何帮助将不胜感激。

function hiliteQty(i) {
    console.log('Highlighting received quantity on #' + i);
    $eRow = $('tr#' + i);
    var qtyord = $eRow.find('td.qtyOrd').text();
    var qtyrec = $eRow.find('td.qtyRec').text();
    if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
        $eRow.find('td.qtyRec').removeClass('incomplete',100,'linear').addClass('complete',1000,'easeInElastic');
    } else {
        $eRow.find('td.qtyRec').removeClass('complete',100,'linear').addClass('incomplete',1000,'easeInElastic');
    };
}
$(function() {
    var ml_id = '<?=$ml_id;?>', ml_name = '<?=$objML_temp->showMLName();?>', suppno = '<?=$objML_temp->gSupp();?>', projnum = '<?=$objJob_temp->gProjectNumber();?>', job_id = '<?=$objML_temp->gJobID();?>', lastDate, lastSel;
    $('#special_dialog').dialog({
        width:'auto',
        height:'auto',
        resizable:true
    });
    $.extend($.jgrid.defaults,{
        inlineData:{
            ml_id:ml_id,
            project_number:projnum,
            job_id:job_id
        },
        rowNum:1000,
        rowList:[20,50,100,500,1000],
        viewrecords:true,
        sortorder:'asc',
        height:500,
        autowidth:true,
        deepempty:true,
        altRows: true,
        grouping: true,
        groupingView: {
            groupField: ["vendor"],
            groupColumnShow: [true],
            groupText: ["<b>VENDOR: {0}</b>"],
            groupDataSorted: true,
            groupSummary: [false]
        }
    });
    // setup Minor Materials grid
    var mmGrid = $('#orderMMGrid'),
        editingRowId,
        mmEditParam = {
            keys: true,
            oneditfunc: function(id) {
                $('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
                $('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
                hiliteQty(id);
            },
            afterrestorefunc: function() {
                editingRowId = undefined;
            },
            aftersavefunc: function(id) {
                hiliteQty(id);
            }
        },
        mmAutoCompOpts = {
            source: function(request, response) {
                $.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
                    response(data);
                });
            },
            minLength: 3,
            focus: function(e,ui) {
                $('input:text[name="description"]').val(ui.item.description);
                $('input:text[name="vendor"]').val(ui.item.vendor);
                $('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
            },
            select: function(e,ui) {
                $('input:text[name="description"]').val(ui.item.description);
                $('input:text[name="vendor"]').val(ui.item.vendor);
                $('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
                $('input:text[name="vendor_id"]').val(ui.item.vendor_id);
            }
        },
        mmAddParam = {
            rowID: 'new',
            position:'last'
        };
    mmGrid.jqGrid({
        url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
        datatype:'json',
        emptyrecords: 'No Minor Materials on this order',
        colNames: ['ID','Type','Supp','VID','Vendor','PO#','MasTec Part#','Manufacturer Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Receiving Clerk Notes','Material Manager Notes'],
        colModel: [
            {   name:'id',
                index:'id',
                hidden:true,
                key:false,
                search:false,
                viewable:false
            },
            {   name:'type',
                index:'type',
                width:35,
                sortable:false,
                editable:false,
                align:'center',
                editoptions:{defaultValue:'M'}
            },
            {   name:'supp',
                index:'supp',
                width:35,
                sortable:false,
                editable:false,
                align:'center',
                editoptions:{defaultValue:suppno}
            },
            {   name:'vendor_id',
                index:'o.vendor_id',
                width:0,
                hidden:true,
                search:false,
                align:'center',
                viewable:true,
                editable:true,
                edittype:'text',
                editoptions:{size:8,readonly:true}
            },
            {   name:'vendor',
                index:'o.vendor_id',
                width:90,
                sortable:true,
                sorttype:'text',
                align:'left',
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{size:20,readonly:true},
                editrules:{required:true}
            },
            {   name:'order_number',
                index:'order_number',
                width:55,
                sortable:true,
                editable:true,
                classes:'ui-ellipsis',
                align:'center'
            },
            {   name:'mastec_partno',
                index:'mastec_partno',
                width:120,
                sortable:false,
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{
                    size:22,
                    dataInit:function(e) {
                        $(e).autocomplete(mmAutoCompOpts);
                    }
                },
                editrules:{required:true}
            },
            {   name:'mfgr_partno',
                index:'mfgr_partno',
                width:120,
                sortable:false,
                editable:true,
                classes:'ui-ellipsis',
                alilgn:'left',
                edittype:'text',
                editoptions:{size:22,readonly:true},
                editrules:{required:false}
            },
            {   name:'description',
                index:'description',
                width:180,
                sortable:false,
                align:'left',
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{size:33,readonly:true},
                editrules:{required:true}
            },
            {   name:'ship_date',
                index:'o.ship_date',
                width:85,
                sortable:true,
                sorttype:'date',
                editable:true,
                align:'center',
                editrules:{required:true},
                editoptions:{   size:15,
                                dataInit: function(l) {
                                    $(l).datepicker({dateFormat:'yy-mm-dd'});
                                }
                            }
            },
            {   name:'qty_ordered',
                index:'qty_ordered',
                width:55,
                sortable:false,
                editable:true,
                align:'center',
                classes:'qtyOrd',
                editrules:{required:true},
                editoptions:{size:6}
            },
            {   name:'rcvd_date',
                index:'o.rcvd_date',
                width:85,
                sortable:true,
                sorttype:'date',
                editable:true,
                align:'center',
                editoptions:{   size:15,
                                dataInit:function(l) {
                                    $(l).datepicker({dateFormat:'yy-mm-dd'});
                                }
                            }
            },
            {   name:'qty_received',
                index:'qty_received',
                width:55,
                sortable:true,
                editable:true,
                align:'center',
                classes:'qtyRec',
                editoptions:{size:6}
            },
            {   name:'rc_notes',
                index:'rc_notes',
                width:250,
                sortable:false,
                editable:true,
                edittype:'textarea',
                classes:'ui-ellipsis',
                editoptions:{rows:'3',cols:'45'}
            },
            {   name:'mm_notes',
                index:'mm_notes',
                width:250,
                sortable:false,
                editable:true,
                edittype:'textarea',
                classes:'ui-ellipsis',
                editoptions:{rows:'3',cols:'45'}
            }
        ],
        pager:'#orderMMFoot',
        sortname:'o.id',
        caption:'Minor Materials Ordered for ' + ml_name,
        afterInsertRow: function(id) {
            $('tr#' + id).each(function() {
                var qtyord = $(this).find('td.qtyOrd').text();
                var qtyrec = $(this).find('td.qtyRec').text();
                if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
                    $(this).find('td.qtyRec').removeClass('incomplete').addClass('complete');
                } else {
                    $(this).find('td.qtyRec').removeClass('complete').addClass('incomplete');
                }
            });
        },
        gridComplete: function() {
            $('.jqgrow').each(function() {
                var qtyord = $(this).find('td.qtyOrd').text();
                var qtyrec = $(this).find('td.qtyRec').text();
                if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
                    $(this).find('td.qtyRec').removeClass('incomplete').addClass('complete');
                } else {
                    $(this).find('td.qtyRec').removeClass('complete').addClass('incomplete');
                }
            });
        },
        onSelectRow: function(id) {
            if(id && id !== lastSel) {
                mmGrid.jqGrid('restoreRow',lastSel);
                lastSel = id;
            }
            mmGrid.jqGrid('editRow',id,true);
            $('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
            $('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
        },
        editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
    });
    mmGrid.jqGrid('navGrid','#orderMMFoot',{
        add:false,
        edit:false,
        del:true
    });
    mmGrid.jqGrid('inlineNav','#orderMMFoot',{
        add:true,
        edit:true,
        editParams:mmEditParam,
        addParams:mmAddParam
    });
});

这是第一个 jqGrid 定义(之后),使用 cmets 和 answer..

function hiliteQty(i) {
    console.log('Highlighting received quantity on #' + i);
    $eRow = $('tr#' + i);
    var qtyord = $eRow.find('td.qtyOrd').text();
    var qtyrec = $eRow.find('td.qtyRec').text();
    if ((+qtyord === +qtyrec) && (qtyrec !== null) && (qtyrec !== 'undefined') && (qtyrec !== '')) {
        $eRow.find('td.qtyRec').removeClass('incomplete',100,'linear').addClass('complete',1000,'easeInElastic');
    } else {
        $eRow.find('td.qtyRec').removeClass('complete',100,'linear').addClass('incomplete',1000,'easeInElastic');
    };
}
function rcvAll(r) {
    var d = dateFormat('isoDate');
    var gridid;
    $.each(r, function(i,v) {
        var $r = $('#' + v);
        gridid = $r.closest('table').attr('id');
        var qtyOrd = $r.find('.qtyOrd').text();
        $('#' + gridid).jqGrid('editRow', v);
        if ( $r.find('.qtyRec > input').val() !== qtyOrd.parseInt() ) {
            $r.find('.qtyRec > input').val(qtyOrd);
            $r.find('.rcvDate > input').val(d);
            console.log(dateFormat('isoMicro'));
            $('#' + gridid).jqGrid('saveRow', v, false);
            console.log(dateFormat('isoMicro'));
        }
    });
    $('#' + gridid).trigger('reloadGrid');
}
$(function() {
    var ml_id = '<?=$ml_id;?>', ml_name = '<?=$objML_temp->showMLName();?>', suppno = '<?=$objML_temp->gSupp();?>', projnum = '<?=$objJob_temp->gProjectNumber();?>', job_id = '<?=$objML_temp->gJobID();?>', lastDate;
    $('#special_dialog').dialog({
        width:'auto',
        height:'auto',
        resizable:true
    });
    $.extend($.jgrid.defaults,{
        inlineData:{
            ml_id:ml_id,
            project_number:projnum,
            job_id:job_id
        },
        rowNum:1000,
        rowList:[20,50,100,500,1000],
        viewrecords:true,
        sortorder:'asc',
        height:500,
        autowidth:true,
        deepempty:true,
        altRows: true,
        grouping: true,
        groupingView: {
            groupField: ["vendor"],
            groupColumnShow: [true],
            groupText: ["<b>VENDOR: {0}</b>"],
            groupDataSorted: true,
            groupSummary: [false]
        }
    });
    //////////////////////////////
    // setup Minor Materials grid
    //////////////////////////////
    var $mmGrid = $('#orderMMGrid'),
        $mmFoot = $('#orderMMFoot'),
        mmEditParam = {
            keys: true,
            oneditfunc: function(id) {
                $('#orderMMGrid_ilsave').removeClass('ui-state-disabled');
                $('#orderMMGrid_ilcancel').removeClass('ui-state-disabled');
                hiliteQty(id);
            },
            aftersavefunc: function(id) {
                hiliteQty(id);
            }
        },
        mmAddParam = {
            rowID: 'new',
            position:'last',
            addRowParams: mmEditParam
        },
        mmAutoCompOpts = {
            source: function(request, response) {
                $.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
                    response(data);
                });
            },
            minLength: 3,
            focus: function(e,ui) {
                $('input:text[name="description"]').val(ui.item.description);
                $('input:text[name="vendor"]').val(ui.item.vendor);
                $('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
            },
            select: function(e,ui) {
                $('input:text[name="description"]').val(ui.item.description);
                $('input:text[name="vendor"]').val(ui.item.vendor);
                $('input:text[name="mfgr_partno"]').val(ui.item.mfgr_partno);
                $('input:text[name="vendor_id"]').val(ui.item.vendor_id);
            }
        };
    $mmGrid.jqGrid({
        url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
        datatype:'json',
        emptyrecords: 'No Minor Materials on this order',
        colNames: ['ID','Type','Supp','VID','Vendor','PO#','MasTec Part#','Manufacturer Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Receiving Clerk Notes','Material Manager Notes'],
        colModel: [
            {   name:'id',
                index:'id',
                hidden:true,
                key:false,
                search:false,
                viewable:false
            },
            {   name:'type',
                index:'type',
                width:35,
                sortable:false,
                editable:false,
                align:'center',
                editoptions:{defaultValue:'M'}
            },
            {   name:'supp',
                index:'supp',
                width:35,
                sortable:false,
                editable:false,
                align:'center',
                editoptions:{defaultValue:suppno}
            },
            {   name:'vendor_id',
                index:'o.vendor_id',
                width:0,
                hidden:true,
                search:false,
                align:'center',
                viewable:true,
                editable:true,
                edittype:'text',
                editoptions:{size:8,readonly:true}
            },
            {   name:'vendor',
                index:'o.vendor_id',
                width:90,
                sortable:true,
                sorttype:'text',
                align:'left',
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{size:20,readonly:true},
                editrules:{required:true}
            },
            {   name:'order_number',
                index:'order_number',
                width:55,
                sortable:true,
                editable:true,
                classes:'ui-ellipsis',
                align:'center'
            },
            {   name:'mastec_partno',
                index:'mastec_partno',
                width:120,
                sortable:false,
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{
                    size:22,
                    dataInit:function(e) {
                        $(e).autocomplete(mmAutoCompOpts);
                    }
                },
                editrules:{required:true}
            },
            {   name:'mfgr_partno',
                index:'mfgr_partno',
                width:120,
                sortable:false,
                editable:true,
                classes:'ui-ellipsis',
                alilgn:'left',
                edittype:'text',
                editoptions:{size:22,readonly:true},
                editrules:{required:false}
            },
            {   name:'description',
                index:'description',
                width:180,
                sortable:false,
                align:'left',
                editable:true,
                classes:'ui-ellipsis',
                edittype:'text',
                editoptions:{size:33,readonly:true},
                editrules:{required:true}
            },
            {   name:'ship_date',
                index:'o.ship_date',
                width:85,
                sortable:true,
                sorttype:'date',
                editable:true,
                align:'center',
                editrules:{required:true},
                editoptions:{   size:15,
                                dataInit: function(l) {
                                    $(l).datepicker({dateFormat:'yy-mm-dd'});
                                }
                            }
            },
            {   name:'qty_ordered',
                index:'qty_ordered',
                width:55,
                sortable:false,
                editable:true,
                align:'center',
                classes:'qtyOrd',
                editrules:{required:true},
                editoptions:{size:6}
            },
            {   name:'rcvd_date',
                index:'o.rcvd_date',
                width:85,
                sortable:true,
                classes:'rcvDate',
                sorttype:'date',
                editable:true,
                align:'center',
                editoptions:{   size:15,
                                dataInit:function(l) {
                                    $(l).datepicker({dateFormat:'yy-mm-dd'});
                                }
                            }
            },
            {   name:'qty_received',
                index:'qty_received',
                width:55,
                sortable:true,
                editable:true,
                align:'center',
                classes:'qtyRec',
                cellattr:function(rowId,val,rawObj,cm,rdata) {
                    if (val === rawObj.qty_ordered) {
                        return ' class="complete"';
                    } else {
                        return ' class="incomplete"';
                    }
                },
                editoptions:{size:6}
            },
            {   name:'rc_notes',
                index:'rc_notes',
                width:250,
                sortable:false,
                editable:true,
                edittype:'textarea',
                classes:'ui-ellipsis',
                editoptions:{rows:'3',cols:'45'}
            },
            {   name:'mm_notes',
                index:'mm_notes',
                width:250,
                sortable:false,
                editable:true,
                edittype:'textarea',
                classes:'ui-ellipsis',
                editoptions:{rows:'3',cols:'45'}
            }
        ],
        pager:'#orderMMFoot',
        sortname:'o.id',
        caption:'Minor Materials Ordered for ' + ml_name,
        onSelectRow: function(id) {
            var savedRows = $mmGrid.jqGrid('getGridParam','savedRow');
            if(savedRows.length > 0) {
                $mmGrid.jqGrid('restoreRow', savedRows[0].id);
            }
            $mmGrid.jqGrid('editRow', id, mmEditParam);
        },
        editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
    });
    $mmGrid
    .jqGrid('navGrid','#orderMMFoot',{
        add:false,
        edit:false,
        del:true
    })
    .jqGrid('navSeparatorAdd','#orderMMFoot',{
        sepclass:'ui-separator',
        sepcontent:''
    })
    .jqGrid('navButtonAdd','#orderMMFoot',{
        title:'Receive All',
        caption:'',
        buttonicon:'ui-icon-cart',
        onClickButton:function() {
            var dataRowIDs = $mmGrid.jqGrid('getDataIDs');
            rcvAll(dataRowIDs);
        },
        position:'last'
    })
    .jqGrid('navSeparatorAdd','#orderMMFoot',{
        sepclass:'ui-separator',
        sepcontent:''
    })
    .jqGrid('inlineNav','#orderMMFoot',{
        add:true,
        edit:true,
        save:true,
        cancel:true,
        editParams:mmEditParam
    });

【问题讨论】:

  • 很奇怪,你使用mmAddParam而其他定义为{ rowID: 'new', position:'last' }。我希望您至少使用mmAddParam: { rowID: 'new', position:'last', addRowParams: mmEditParam }。这也意味着在添加新行期间使用mmEditParam(包括aftersavefunc)。
  • @Oleg 对不起,我不太确定我明白你在说什么。我是否需要移动我的一些代码才能让事情正常工作?
  • 我在您的代码中看到了许多小问题。此外,可以多次减少代码,以便为不同的网格共享相同的代码片段。尽管如此,我看到的主要问题是:您指定keys: trueaftersavefunc 和其他编辑选项仅适用于“编辑”按钮。添加按钮不要使用选项。如果您使用一些旧版本的 jqGrid,您可能会遇到更多问题。您必须使用keys: trueaftersavefunc 和其他编辑选项,您必须将其指定为addParam 选项的addRowParams。只需尝试将addRowParams: mmEditParam 属性添加到mmAddParam 并使用Add。
  • onSelectRow 内部有一个明显的错误。例如mmGrid.jqGrid('editRow',id,true) 需要替换为mmGrid.jqGrid('editRow',id,mmEditParam)。另一个问题:editingRowId 变量将为多个网格共享。因此,一个网格的值将被另一个网格覆盖。它只有一行可以同时在一个网格中编辑,然后您可以使用savedRow参数而不是editingRowId变量(例如参见the answer
  • @Oleg,非常有帮助,谢谢!在启动该脚本之前,我没有使用 jqGrid 的经验。我使用了几个混合示例、文档和尽可能多的信息。我明白你对冗余参数的意思以及我似乎错过了在多个网格上重复使用大量代码的标记。再次,非常感谢。

标签: jquery jqgrid


【解决方案1】:

代码中的主要问题:应该在onSelectRow 中使用XXEditParam(如mmEditParam)。例如,应将mmGrid.jqGrid('editRow',id,true) 替换为mmGrid.jqGrid('editRow',id,mmEditParam)

另一个重要问题:当前代码指定keys: trueaftersavefunc 和其他编辑选项仅适用于编辑按钮。添加按钮不要使用选项。如果您使用一些旧版本的 jqGrid,您可能会遇到更多问题。您必须使用keys: trueaftersavefunc 和其他编辑选项,您必须将其指定为addRowParamsaddParam 选项。只需尝试将addRowParams: mmEditParam 属性添加到mmAddParam 并使用添加。您将看到keys: trueaftersavefunc 和其他编辑选项将在使用添加按钮的情况下开始工作。

【讨论】:

  • 我已经发布了我的网格定义的答案后修改版本,我相信它有一些改进,但我仍然遇到问题。 ENTER 键仍然不会触发“aftersavefunc”事件,我需要将视觉提示传递给我的用户,即他们输入的收到的数量与订购的数量是否匹配。它在“cellattr”方法中运行良好。另外,我真的需要在编辑开始时删除保存和取消图标的“禁用”类吗?谢谢。
猜你喜欢
  • 2016-10-25
  • 1970-01-01
  • 1970-01-01
  • 2016-10-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多