Question

我正在使用jqGrid 4.4.0进行内联编辑。为了这个问题，我的网格有四列：一个ID列（SomeGridRowId），一个带有jQuery自动完成（自动完成）的文本列，一个单字符文本列（SingleChar）和一个隐藏的boolean列（ CanEditSingleChar）。我需要根据CanEditSingleChar列的值启用或禁用单个字符列的编辑。我已经使用onSelectRow和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属性，所有这些属性都在新行上？

修改
我终于得到了working example up here。如果添加一行，然后在Autocomplete列中选择“非典型*”，则可以重现此行为。

Answer 1

如果没有实际示例，很难说清楚为什么新添加的行无法编辑。此外，由于jqGrid和其他依赖关系，我很难将自己的简单工作示例（例如，在jsfiddle或jsbin上）放在一起。

查看您的代码后可能有所帮助的几个问题（或者对您已尝试过的内容可能没有什么新内容）：

addRow - 如何使用addRow function添加行？其他所有“jqGrid相关”是否与新添加的行一起工作，即它是否正确初始化？我使用datatables来解决这类问题。
正确/唯一的行ID？ - 您是否检查过rowid对于新行是唯一的，并且您的代码是用正确的代码执行的（即新行的id）？您是否已将console.log语句放入setSingleCharEditMode以查看正在发生的事情（只是为了确定，您说您已经完成了代码）？

您可能正在设置单元格的editable属性另一行（想一想：这不可能，因为默认情况下单元格应该是可编辑的，并且明确地设置为不能被代码编辑。）。将行的颜色与editable属性一起更改，以便轻松查看正在处理的单元格/行。
默认工作？ - 由于editable的默认值为true：您尝试过吗？禁用setSingleCharEditMode并查看该单元格是否可编辑默认情况下？也许这个问题不是你的评价，而是你的评价这行本身？
正确类型？ - 在setSingleCharEditMode中，您使用字符串“false”测试strict equality的列值。你确定这些价值观吗？对于现有和新行具有相同的类型（应该是，因为它们字符串并通过相同的jqGrid代码解析：getRowData）？我猜你已经在该函数中广泛使用console.log ged来查看传递的id发生了什么以及设置editable属性‽
的比较

希望这有助于找到问题。正如我所说，没有一个有效的例子，调试真的很难。你可能想把它放在某个地方。

[在工作示例后编辑]

我首先看到的是，如果您在现有的可编辑行中选择“非典型躁狂症”，则会应用相同的行为。另外：添加可编辑行（Bipolar something）可行。这似乎不是“新行”与“现有行”的问题。更像是可编辑行的问题，这些行被更改为不可编辑。

我的猜测是这种情况发生了：

您要添加新行，默认情况下列SingleChar可编辑，因此会显示<input>。
您评估服务器响应并将列设置为自动完成editable : false处理程序中的select。
您取消选择该行，jqGrid会还原所有然后可编辑的行，因此它不会触及SingleChar，因为它认为 SingleChar不需要重置为初始状态..

我有道理吗？

在jqGrid重置行或自行删除editable之后，尝试将false设置为<input>。

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

1 个答案: