根据另一列中自动完成的结果更改jqGrid文本列的可编辑属性 [英] Changing a jqGrid text column&#39;s editable property based on results of an autocomplete in another column

查看：263 发布时间：2020/8/20 2:13:15 jquery jqgrid

本文介绍了根据另一列中自动完成的结果更改jqGrid文本列的可编辑属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用jqGrid 4.4.0进行内联编辑.为了这个问题，我的网格有四列:ID列(SomeGridRowId)，带有jQuery自动完成功能的文本列(Autocomplete)，单个字符文本列(SingleChar)和隐藏的boolean列(CanEditSingleChar) .我需要基于CanEditSingleChar列的值启用或禁用单个字符列的编辑.我已经使用onSelectRow和setColProp在现有行上进行了此工作，但是由于某些原因，我无法使其在新插入的行上正确运行.如果我添加新行并从自动完成功能中选择一个值，则SingleChar列总是不可编辑.我已经使用Chrome和IE开发人员工具逐步浏览了Javascript；列的值和属性已正确设置，但是SingleChar列的editable属性不能反映这一点.

I am using jqGrid 4.4.0 with inline editing. For the sake of this question, my grid has four columns: an ID column (SomeGridRowId), a text column with a jQuery autocomplete (Autocomplete), a single character text column (SingleChar), and a hidden boolean column (CanEditSingleChar). I need to enable or disable editing of the single character column based on the value of the CanEditSingleChar column. I've got this working on existing rows using onSelectRow and setColProp, but for some reason I cannot get it to behave correctly on newly inserted rows. If I add a new row and select a value from the autocomplete, the SingleChar column is always not editable. I've stepped through the Javascript using the Chrome and IE developer tools; the column values and properties are getting set properly, but the SingleChar column's editable property does not reflect this.

我为巨大的代码片段表示歉意，但我不想遗漏任何内容.

I apologize for the gigantic code snippet, but I don't want to leave anything out.

$("#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问题，像疯了似的在谷歌上搜索..全部无济于事.我已经把头发拔了.在另一列上自动完成select之后，如何在新行上全部控制一列的editable属性?

I've tried a whole slew of stuff, rifled through a pile of other SO questions, googled like mad....all to no avail. I've resorted to pulling my hair out. How can I control the editable property of one column after an autocomplete select on another column, all on a new row?

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

EDIT
I've got a working example up here, finally. If you add a row and then select either of the "Atypical *" in the Autocomplete column, you can reproduce this behavior.

根据另一列中自动完成的结果更改jqGrid文本列的可编辑属性 [英] Changing a jqGrid text column&#39;s editable property based on results of an autocomplete in another column

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

根据另一列中自动完成的结果更改jqGrid文本列的可编辑属性 [英] Changing a jqGrid text column&amp;#39;s editable property based on results of an autocomplete in another column

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

根据另一列中自动完成的结果更改jqGrid文本列的可编辑属性 [英] Changing a jqGrid text column's editable property based on results of an autocomplete in another column

登录关闭