jquery - 根据另一列中的自动完成结果更改 jqGrid 文本列的可编辑属性

Question

我正在使用带有内联编辑的 jqGrid 4.4.0。为了这个问题，我的网格有四列：一个 ID 列 (SomeGridRowId)、一个带有 jQ​​uery 自动完成功能的文本列 (Autocomplete)、一个单字符文本列 (SingleChar) 和一个隐藏boolean列 (CanEditSingleChar)。我需要根据列的值启用或禁用对单个字符列的编辑CanEditSingleChar。我已经使用onSelectRowand对现有行进行了这项工作setColProp，但由于某种原因，我无法让它在新插入的行上正常运行。如果我添加一个新行并从自动完成中选择一个值，则该SingleChar列始终不可编辑。我已经使用 Chrome 和 IE 开发工具逐步完成了 Javascript；列值和属性设置正确，但SingleChar列的editable属性没有反映这一点。

我为巨大的代码片段道歉，但我不想遗漏任何内容。

$("#coolGrid").jqGrid({
    url: '@Url.Action("GetCoolGridData")',
    postData: {
        someId: function () { return $("#someId").val(); },
        otherStaticArg: function () { return 1; }
    },
    datatype: 'json',
    mtype: 'POST',
    loadonce: true,
    cellsubmit: 'clientArray',
    editurl: 'clientArray',
    scroll: true,
    pager: $("#coolGridPager"),
    rowNum: 200,
    sortname: 'SomeGridRowId',
    sortorder: 'asc',
    viewrecords: true,
    height: '100%',
    colNames: ['SomeGridRowId', 'CanEditSingleChar', 'Autocomplete', 'SingleChar'],
    colModel: [
        { name: 'SomeGridRowId', index: 'SomeGridRowId', hidden: true },
        { name: 'CanEditSingleChar', index: 'CanEditSingleChar', hidden: true }, 
        {
            name: 'Autocomplete',
            index: 'Autocomplete',
            width: 220,
            editable: true,
            edittype: 'text',
            editoptions: {
                dataInit: function (elem) {
                    $(elem).autocomplete({
                        source: '@Url.Action("GetSomeGridAutocomplete")',
                        minLength: 2,
                        select: function (event, ui) {
                            var rowId = getRowId($(this));
                            if (ui.item) {
                                $("#coolGrid").jqGrid('setCell', rowId, 'CanEditSingleChar', ui.item.CanEditSingleChar, '', '');
                                $("#coolGrid").jqGrid('setCell', rowId, 'Autocomplete', ui.item.label, '', '');
                                setSingleCharEditMode(rowId);
                            }
                        }
                    });
                }
            }
        },
        {
            name: 'SingleChar',
            index: 'SingleChar',
            width: 10,
            editable: true,     //default to true, most are editable
            edittype: 'text'
        }
    ],
    onSelectRow: function (clickedRow) {
        if (clickedRow && clickedRow != $.coolGridLastSelectedRow) {
            $("#coolGrid").jqGrid('saveRow', $.coolGridSelectedRow, false, 'clientArray');
            $.coolGridLastSelectedRow = clickedRow;
        }
        setSingleCharEditMode($.coolGridLastSelectedRow);
        $("#coolGrid").jqGrid('editRow', $.coolGridLastSelectedRow, true);
    },
    afterInsertRow: function (rowid, rowdata, rowelem) {
        if (rowid == 'new_row') {       //shown solely for completeness, pretty sure this is not the problem
            var newRowIndex = $("#coolGridNewRowIndex").val();
            if (!newRowIndex)
                newRowIndex = 1;
            var newRowId = rowid + "_" + newRowIndex;
            $("#new_row").attr('id', newRowId);
            newRowIndex++;
            $("#coolGrid").val(newRowIndex);
            $("#coolGrid").jqGrid('setSelection', newRowId, true);
        }
    }
});
$("#coolGrid").jqGrid('navGrid', '#coolGridPager',
{
    add: false,
    del: false,
    edit: false,
    search: false,
    beforeRefresh: function () {
        $("#coolGrid").jqGrid('setGridParam', { datatype: 'json' });
    }
});
$("#coolGrid").jqGrid('inlineNav', '#coolGridPager',
{
    edit: false,
    add: true,
    addtext: "Add",
    save: false,
    cancel: false,
    restoreAfterSelect: false,
    addParams: {
        position: 'last',
        addRowParams: {
            keys: true
        }
    }
});

和setSingleCharEditMode功能：

function setSingleCharEditMode(rowid) {
    var rowData = $("#coolGrid").jqGrid('getRowData', rowid);
    if (rowData.CanEditSingleChar === "false") {
        $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: false });
    } else {
        $("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: true });
    }
}

我已经尝试了一大堆东西，翻阅了一堆其他 SO 问题，疯狂地用谷歌搜索......一切都无济于事。我已经把头发拉了出来。如何在另一列editable自动完成后控制一列的属性select，全部在新行上？

编辑
最后， 我在这里有一个工作示例。如果添加一行，然后在列中选择任一“非典型 *”，则Autocomplete可以重现此行为。

Answer 1