jqGrid 4.x使用内联编辑，尝试在单个字段中实现自动完成

Question

关于这个问题或类似这个问题的情况有很多答案，但不幸的是，它们看起来都很老，jqGrid最近经历了对v4 .x的彻底检修。此外，有许多不同的方法来实现编辑和添加，似乎没有两种情况是相同的。所以，我必须用我的特定代码重新发布这个问题，并要求一个特定的答案。

基本上，我有三个几乎相同的网格，我希望能够内联编辑并使用autocomplete作为单个字段，该字段将基于select方法填充其他两个字段。

**原始代码**

var mmGrid = $('#orderMMGrid'),
    editingRowId,
    myEditParam = {
        keys: false,
        oneditfunc: function(id) {
            editingRowId = id;
            // have tried autocomplete here as well //
        },
        afterrestorefunc: function(id) {
            editingRowId = undefined;
        },
        extraparam: {
            ml_id: ml_id
        }
    },
    myAddParam = {
        rowID: 'new',
        position:'last',
        extraparam: {
            ml_id: ml_id
        }
    };
mmGrid.jqGrid({
    url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
    datatype:'json',
    colNames: ['ID','Type','Supp','Vendor','PO#','MasTec Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Material Manager Notes','Receiving Clerk Notes'],
    colModel: [
        {   name:'id',
            index:'id',
            hidden:true,
            key:false,
            search:false,
            viewable:false
        },
        {   name:'type',
            index:'type',
            width:40,
            sortable:false,
            editable:false,
            align:'center',
            editoptions:{defaultValue:'M'}
        },
        {   name:'supp',
            index:'supp',
            width:40,
            sortable:false,
            editable:false,
            align:'center',
            editoptions:{defaultValue:suppno}
        },
        {   name:'vendor_id',
            index:'o.vendor_id',
            width:75,
            sortable:true,
            sorttype:'text',
            align:'left',
            editable:true,
            classes:'ui-ellipsis',
            edittype:'select',
            editoptions:{dataUrl:'/jqg/jqg.selVendors.php'},
            editrules:{required:true}
        },
        {   name:'order_number',
            index:'order_number',
            width:55,
            sortable:false,
            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},
            editrules:{required:true},
            searchoptions: {
                dataInit: function(e) {
                    $(e).autocomplete({
                        source: allMinorMaterials,
                        minLength: 2,
                        select: function(e,ui) {
                                  e.val(ui.item.id);
                                  $('input[name="description"]').text(ui.item.description);
                                  $('input[name="vendor_id"]').val(ui.item.vendor_id);
                                  return false;
                        }
                    });
                }
            }
        },
        {   name:'description',
            index:'description',
            width:180,
            sortable:false,
            align:'left',
            editable:true,
            classes:'ui-ellipsis',
            edittype:'text',
            editoptions:{size:33},
            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:false,
            editable:true,
            align:'center',
            classes:'qtyRec',
            editoptions:{size:6}
        },
        {   name:'mm_notes',
            index:'mm_notes',
            width:250,
            sortable:false,
            editable:true,
            edittype:'textarea',
            classes:'ui-ellipsis',
            editoptions:{rows:'3',cols:'45'}
        },
        {   name:'rc_notes',
            index:'rc_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,
    gridComplete: function() {
        $('.jqgrow').each(function(i) {
            var ordqty = $(this).find('td.qtyOrd').text();
            var ordrec = $(this).find('td.qtyRec').text();
            if ((+ordqty == +ordrec) && (ordrec !== null) && (ordrec != 'undefined')) {
                $(this).find('td.qtyRec').addClass('complete');
            } else {
                $(this).find('td.qtyRec').addClass('incomplete');
            };
        });
    },
    afterSaveCell: function(rowid) {
        var jqRow = $('tr#' + rowid);
        var ordqty = jqRow.find('td.qtyOrd').text();
        var ordrec = jqRow.find('td.qtyRec').text();
        if ((+ordqty == +ordrec) && (ordrec !== null) && (ordrec != 'undefined')) {
            jqRow.find('td.qtyRec').addClass('complete');
        } else {
            jqRow.find('td.qtyRec').addClass('incomplete');
        };
    },
    onSelectRow: function(id) {
        if(id && id !== lastSel) {
            mmGrid.jqGrid('restoreRow',lastSel);
            mmGrid.jqGrid('editRow',id,true);
            lastSel = id;
        }
    },
    editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
});
mmGrid.jqGrid('navGrid','#orderMMFoot',{add:false,edit:false,del:true});
mmGrid.jqGrid('inlineNav','#orderMMFoot',{add:true,edit:true,del:true,editParams:myEditParam,addParams:{addRowParams:myAddParam}});

oneditfunc中带autocomplete的可选代码

var mmGrid = $('#orderMMGrid'),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function(id) {
            editingRowId = id;
            alert('#' + id + '_mastec_partno');
            $('#' + id + '_mastec_partno').autocomplete({
                source: function(request, response) {
                    $.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
                        response(data);
                    })
                },
                minLength: 2,
                select: function(e,ui) {
                    $(e).val(ui.item.id);
                    $('input[name="description"]').text(ui.item.description);
                    $('input[name="vendor_id"]').val(ui.item.vendor_id);
                    return false;
                }
            });
        },
        afterrestorefunc: function(id) {
            editingRowId = undefined;
        }
    },
    myAddParam = {
        rowID: 'new',
        position:'last',
        extraparam: {
            ml_id: ml_id
        }
    };

内联编辑似乎正在工作。extraParams正在工作。

其中一个问题似乎是在内联编辑期间在字段内创建的#inner-editor元素。

以下几个张贴的答案/例子，我已经尝试了autocomplete在搜索选项，和oneditfunc，无济于事。mastec_partno必须是autocomplete，这样才能将正确的值放入其他两个字段

Answer 1

部分问题已解决!我已经使用以下代码成功激活了我所关心的字段中的autocomplete:

参数设置

var mmGrid = $('#orderMMGrid'),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function(id) {
            editingRowId = id;
        },
        afterrestorefunc: function(id) {
            editingRowId = undefined;
        }
    },
    myAutoCompOpts = {
        source: function(request, response) {
            $.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
                response(data);
            })
        },
        minLength: 2,
        select: function(e,ui) {
            $('input:text[name="description"]').val(ui.item.description); // this is now working!
            $('select[name="vendor_id"]').val(ui.item.vendor_id); // this is now working!!
        }
    },
    myAddParam = {
        rowID: 'new',
        position:'last',
        extraparam: {
            ml_id: ml_id
        }
    };

colModel代码激活自动补全

{   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(myAutoCompOpts); // this did the trick
        }
    },
    editrules:{required:true}
},

现在，基于此代码和autocomplete的select回调，我也能够成功地更改vendor_id colModel/字段中的value，但我仍然无法修改描述 colModel/字段。下面是它的代码:

{   name:'vendor_id',
    index:'o.vendor_id',
    width:75,
    sortable:true,
    sorttype:'text',
    align:'left',
    editable:true,
    classes:'ui-ellipsis',
    edittype:'select',
    formatter:'select',
    editoptions:{dataUrl:'/jqg/jqg.selVendors.php',readonly:true},
    editrules:{required:true}
},
{   name:'description',
    index:'description',
    width:180,
    sortable:false,
    align:'left',
    editable:true,
    classes:'ui-ellipsis',
    edittype:'text',
    editoptions:{size:33,readonly:true}, // moved readonly here
    editrules:{required:true}
},

我现在唯一的问题是让vendor_id字段在编辑后重新出现。