EasyUI Datagrid加载完成后如何选中外部下拉框匹配状态值的单个选项

问题根因 #

• 代码中声明的全局selected数组存储了当前页所有行的status值，拼接选择器时数组会被隐式转为逗号分隔的字符串，导致同时匹配多个option值，触发多选效果
• 下拉框使用了固定id属性stat_column，而DOM规范中id必须全局唯一，表格渲染时每行都会生成一个相同id的select元素，选择器会命中所有下拉框，导致批量选中的问题
• 原有逻辑没有做状态一致性判断，不符合「匹配对应状态值单选」的需求

修复方案 #

方案1：渲染时直接设置选中状态（推荐） #

直接修改列格式化函数，在生成每行的下拉框时就根据当前行的status设置选中属性，无需额外监听表格加载事件：

function status_column(value,row,index) {
    // 生成当前行唯一的下拉框ID，避免id重复冲突
    const selectId = `stat_column_${row.id}`;
    // 渲染下拉框，同时匹配当前行status设置选中状态
    return `
    <select name="stat_column" id="${selectId}" class="form_control stat_column">
        <option value="">Select Status</option>
        <option value="All" ${row.status === 'All' ? 'selected' : ''}>All</option>
        <option value="Open" ${row.status === 'Open' ? 'selected' : ''}>Open</option>
        <option value="Closed" ${row.status === 'Closed' ? 'selected' : ''}>Closed</option>
        <option value="Won" ${row.status === 'Won' ? 'selected' : ''}>Won</option>
        <option value="Lost Price is High" ${row.status === 'Lost Price is High' ? 'selected' : ''}>Lost Price is High</option>
        <option value="Lost Not Enough Features" ${row.status === 'Lost Not Enough Features' ? 'selected' : ''}>Lost Not Enough Features</option>
        <option value="Lost Other" ${row.status === 'Lost Other' ? 'selected' : ''}>Lost Other</option>
        <option value="Never Replied Back" ${row.status === 'Never Replied Back' ? 'selected' : ''}>Never Replied Back</option>
        <option value="Bad Email" ${row.status === 'Bad Email' ? 'selected' : ''}>Bad Email</option>
        <option value="Bad Number" ${row.status === 'Bad Number' ? 'selected' : ''}>Bad Number</option>
        <option value="Do Not Disturb" ${row.status === 'Do Not Disturb' ? 'selected' : ''}>Do Not Disturb</option>
    </select>
    `;
}

原有存放在#status_column的下拉框模板可以直接删除，不再需要。

方案2：在表格加载完成后统一处理 #

如果需要保留在onLoadSuccess中处理选中逻辑的写法，修改代码如下：

$(function () {
    $('#tt').datagrid({
        onLoadSuccess:function(){
            // 获取当前页所有行数据
            const rows = $('#tt').datagrid('getRows');
            // 遍历每行单独设置对应下拉框的选中值
            rows.forEach(row => {
                // 匹配每行唯一的下拉框选择器，用val方法设置选中值更可靠
                $(`#stat_column_${row.id}`).val(row.status);
            })
        }
    });
})

补充：如果是外部单个下拉框选中全页统一状态 #

如果你的需求是表格外的单个下拉框，在表格加载完成后选中当前页所有行统一的状态值，使用如下逻辑：

$(function () {
    $('#tt').datagrid({
        onLoadSuccess:function(){
            const rows = $('#tt').datagrid('getRows');
            // 对当前页所有状态值去重
            const statusList = [...new Set(rows.map(item => item.status))];
            // 只有所有行状态完全一致时才选中对应选项
            if(statusList.length === 1) {
                $('#stat_column').val(statusList[0]);
            } else {
                // 状态不一致时重置为默认选项
                $('#stat_column').val('');
            }
        }
    });
})

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