jqGrid - 根据其他列的值禁用/启用选择*最初*

Question

我的网格中有两列，“类型”和“货币”。当类型设置为百分比 ('P') 时，'Currency' 应该默认选择一个空选项并禁用。

this question 的代码在将类型从 'F' 更改为 'P' 时完美运行，并且适合内联编辑，但我有以下问题：

1. 如果表中的记录为“P”类型，则打开编辑表单时，选择的类型为“百分比”，但启用了“货币”选择元素。

2. 如果我有两条“F”类型的记录，我打开其中一条的编辑表单，将类型更改为“P”（现在“货币”选择被禁用并为空），并且没有保存我使用对话框的箭头移动到下一条记录，现在选择的类型是“F”并且“货币”选择没有空选项，但它被禁用了。

我尝试在货币列中使用dataInit 修复此问题，但在发生这种情况时，“类型”选择似乎不存在。

添加/删除空选项，禁用/启用“货币”选择的功能：

function toggleCurrency(typeSelect, currencySelect) {
    var emptyOption = '<option value=""></option>';
    if (typeSelect.val() === 'P') {
        currencySelect.prop("disabled", true);
        currencySelect.append(emptyOption);
        currencySelect.val("");
    } else {
        currencySelect.prop("disabled", false);
        currencySelect.find('option[value=""]').remove();
    }
    return false;
}

网格的“类型”和“货币”列：

{
    name : 'Type',
    edittype : 'select',
    formatter : 'select',
    editoptions : {
        value : 'F:Fixed Amount;P:Percentage',
        dataEvents : [{
            type : 'change',
            fn : function(e) {
                var $this = $(e.target), $td, rowid;
                var currencySelect;
                if ($this.hasClass("FormElement")) {
                    currencySelect = $("#Currency");
                } else {
                    $td = $this.closest("td");
                    if ($td.hasClass("edit-cell")) {

                    } else {
                        var rowid = $td.closest("tr.jqgrow").prop("id");
                        if (rowid) {
                            currencySelect = $("#" + $.jgrid.jqID(rowid) + "_Currency");
                        }
                    }
                }
                toggleCurrency($this, currencySelect);
            }
        }]
    },
stype : 'select'
}, {
    name : 'Currency',
    edittype : 'select',
    editoptions : {
        dataUrl : '/api/v1/currency/?user__id=' + userid,
        buildSelect : function(data) {
            var response = $.parseJSON(data);
            var s = '<select>';
            $.each(response.objects, function(index, currency) {
                s += '<option value="' + currency.id + '">' + currency.code + '</option>';
            });
            return s + "</select>";
        },
        dataInit : function(elem) {
            var typeSelect;
            var $this = $(elem);
            if ($this.hasClass("FormElement")) {
                typeSelect = $("#Type");
            } else {
                $td = $this.closest("td");
                if ($td.hasClass("edit-cell")) {

                } else {
                    var rowid = $td.closest("tr.jqgrow").prop("id");
                    if (rowid) {
                        typeSelect = $("#" + $.jgrid.jqID(rowid) + "_Type");
                    }
                }
            }
            console.log(typeSelect); // Logs an empty object
            toggleCurrency(typeSelect, $this);
        }
    },
    stype : 'select',
    width : 60
}

我也尝试在添加和编辑选项中使用beforeShowForm，但它有类似的问题：

beforeShowForm : function(form) {
    centerDialog($("#editmodjqgrid-account-commissions"));
    console.log($('#Currency')); // Logs en empty object
    toggleCurrency($('#Type'), $('#Currency'));
}

我没有想法，如果有人可以帮助我，我将不胜感激。

更新 1

我可以使用以下方法解决导航问题：

afterclickPgButtons : function(whichbutton, formid, rowid) {
    toggleCurrency($('#Type'), $('#Currency'));
}

但我仍然遇到$("#Type") 对象在dataInit 中未定义的问题。

Answer 1

我发现了一个不太好的解决方案。

我将toggleCurrency()修改为：

function toggleCurrency(typeSelectValue, currencySelect) {
    var emptyOption = '<option value=""></option>';
    if (typeSelectValue === 'P') {
        currencySelect.prop("disabled", true);
        currencySelect.append(emptyOption);
        currencySelect.val("");
    } else {
        currencySelect.prop("disabled", false);
        currencySelect.find('option[value=""]').remove();
    }
    return true;
}

“货币”列dataInit 是：

dataInit : function(elem) {
    var typeSelect;
    var rowid;
    var $this = $(elem);
    if ($this.hasClass("FormElement")) {
        // Get selected row in the grid
        selectedRow = $("#jqgrid-account-commissions > tbody > tr[aria-selected='true']");
        // Check if the value in the 'Type' column is 'Percentage'
        typeSelectValue = (selectedRow.find("td[aria-describedby='jqgrid-account-commissions_Type']").prop("title") === 'Percentage') ? 'P' : 'F';
    } else {
        $td = $this.closest("td");
        if ($td.hasClass("edit-cell")) {

        } else {
            rowid = $td.closest("tr.jqgrow").prop("id");
            if (rowid) {
                typeSelectValue = $("#" + $.jgrid.jqID(rowid) + "_Type").val();
            }
        }
    }
    toggleCurrency(typeSelectValue, $this);
}