Question

我的网格中有两列，'Type'和'Currency'。当类型设置为百分比（'P'）时，'Currency'应该默认选择一个空选项并被禁用。

来自this question的代码在将类型从“F”更改为“P”时非常有效，而且它适用于内联编辑，但我遇到以下问题：

如果表中的记录具有“P”类型，则在打开编辑表单时，所选类型为“百分比”，但“货币”选择元素已启用。
如果我有两个带有'F'类型的记录，并且我打开其中一个的编辑表单，请将类型更改为'P'（现在'Currency'选择被禁用并且为空），并且没有保存我使用对话框的箭头移动到下一条记录，现在所选类型为'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);
}

jqGrid - 根据其他列的值禁用/启用select * initial *

1 个答案: