如何基于jqGrid中Revenue Stream选择动态隐藏Licensing下拉选项？

jqGrid动态过滤下拉列选项实现思路 #

现有两个jqGrid网格，第一个网格选中值后，第二个#GridSelectedProducts网格会加载对应数据并设置为单元格可编辑状态。其中Revenue-Stream和Licensing为下拉类型列，需求是根据Revenue-Stream的选中值，动态隐藏Licensing下拉列表中的特定选项。

实现步骤 #

1. 完善下拉列的colModel配置

确保SelectedProductsModel中两个下拉列配置edittype: 'select'，并给Revenue-Stream添加change事件监听：

// SelectedProductsModel中对应列的配置示例
[
    // ...其他列配置
    {
        name: 'Revenue-Stream',
        index: 'Revenue-Stream',
        edittype: 'select',
        editoptions: {
            value: 'Subscription:Subscription;One-Time:One-Time', // 替换为你的实际选项值
            dataEvents: [
                {
                    type: 'change',
                    fn: function(e) {
                        // 触发下拉值变化后的过滤逻辑
                        handleRevenueFilter(e, $(this).closest('tr.jqgrow').attr('id'));
                    }
                }
            ]
        }
    },
    {
        name: 'Licensing',
        index: 'Licensing',
        edittype: 'select',
        editoptions: {
            value: 'Per-User:Per-User;Per-Device:Per-Device;Site-License:Site-License' // 替换为你的实际选项值
        }
    }
    // ...其他列配置
]

2. 编写下拉过滤核心函数

定义handleRevenueFilter函数，保存原始选项并根据选中值过滤Licensing下拉：

function handleRevenueFilter(e, rowId) {
    const selectedRevenue = $(e.target).val();
    // 获取当前行的Licensing下拉控件（jqGrid单元格ID格式：行ID_列name）
    const licensingSelect = $('#' + rowId + '_Licensing');

    // 首次进入时保存所有原始选项，避免重复加载
    if (!licensingSelect.data('originalOptions')) {
        licensingSelect.data('originalOptions', licensingSelect.html());
    }

    // 根据选中的Revenue值过滤选项
    let filteredOptions = licensingSelect.data('originalOptions');
    if (selectedRevenue === 'Subscription') {
        // 保留指定选项，可根据需求调整过滤条件
        filteredOptions = $(licensingSelect.data('originalOptions'))
            .filter('option[value="Per-User"], option[value="Per-Device"]')
            .prop('outerHTML')
            .join('');
    } else if (selectedRevenue === 'One-Time') {
        filteredOptions = $(licensingSelect.data('originalOptions'))
            .filter('option[value="Site-License"]')
            .prop('outerHTML')
            .join('');
    }

    // 更新下拉列表
    licensingSelect.html(filteredOptions);
}

3. 处理单元格编辑时的选项同步

由于jqGrid的cellEdit模式下，每次进入编辑状态会重新渲染下拉控件，需要在beforeEditCell事件中重新应用过滤逻辑：

// 修改#GridSelectedProducts的初始化配置，添加beforeEditCell事件
jQuery("#GridSelectedProducts").jqGrid({
    // 原有配置...
    beforeEditCell: function(rowid, cellname, value, iRow, iCol) {
        // 当编辑Licensing列时，同步过滤选项
        if (cellname === 'Licensing') {
            const revenueValue = jQuery(this).jqGrid('getCell', rowid, 'Revenue-Stream');
            const licensingSelect = $('#' + rowid + '_Licensing');
            
            if (revenueValue && licensingSelect.data('originalOptions')) {
                // 复用过滤逻辑
                let filteredOptions = licensingSelect.data('originalOptions');
                if (revenueValue === 'Subscription') {
                    filteredOptions = $(licensingSelect.data('originalOptions'))
                        .filter('option[value="Per-User"], option[value="Per-Device"]')
                        .prop('outerHTML')
                        .join('');
                } else if (revenueValue === 'One-Time') {
                    filteredOptions = $(licensingSelect.data('originalOptions'))
                        .filter('option[value="Site-License"]')
                        .prop('outerHTML')
                        .join('');
                }
                licensingSelect.html(filteredOptions);
            }
        }
    },
    // 原有配置...
}).navGrid('#pager10_d', {
    add: false,
    edit: false,
    del: true,
    refresh: false
});

4. 关键注意事项

• 确保colModel中列的name属性与代码中引用的名称完全一致（比如Revenue-Stream）
• 如果Licensing的选项是从服务器动态加载的，需在加载完成后调用一次过滤逻辑保存原始选项
• 可根据实际业务需求调整过滤条件中的选项值和判断逻辑

内容的提问来源于stack exchange，提问作者magicalKhachapuri