使用jqwidgets的jqxGrid时Year列jqxDropdownList默认不显示问题

问题原因 #

jqxGrid的可编辑列默认采用懒加载编辑器的设计：非编辑状态下单元格仅渲染纯文本内容，只有用户点击单元格触发编辑事件时，才会动态创建jqxDropDownList编辑器实例，所以默认状态下看不到下拉箭头，这是框架的原生交互逻辑，不属于配置错误。

现有代码存在的两处疏漏 #

1. Year列未指定datafield属性，导致单元格没有绑定数据源字段，初始状态显示为空，选中的下拉值也无法持久化存储到行数据中。
2. 非编辑态无下拉箭头标识，用户无法直观感知该列是下拉选择列。

完整修复方案 #

1. 补充数据源字段绑定 #

生成测试数据时新增year字段并赋默认值：

for (var i = 0; i < 10; i++) {
    var row = {};
    // 原有其他字段生成逻辑保持不变
    row["year"] = "2010"; // 补充默认年份值
    data[i] = row;
}

2. 完善Year列配置 #

给列增加datafield属性，补充initeditor配置实现点击单元格自动展开下拉列表：

{
    text: 'Year',
    datafield: 'year', // 新增字段绑定
    width: 120, 
    columntype: 'dropdownlist', 
    editable: true,
    createeditor: function (row, column, editor) {
        var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
        editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
    },
    initeditor: function (row, cellvalue, editor) {
        editor.jqxDropDownList('val', cellvalue); // 编辑时默认选中当前单元格值
        editor.jqxDropDownList('open'); // 自动展开下拉列表
    },
    cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
        return '<span style="position: relative; width: 100%; margin: 4px; float: ' + columnproperties.cellsalign + ';">'
            + value + '<img src="https://www.jqwidgets.com/public/jqwidgets/styles/images/icon-down.png" style="position: absolute; right: 5px;" /></span>';
    }
}

修改后Year列非编辑状态会显示下拉箭头，点击单元格自动展开下拉列表，选中的值会自动同步到行数据中。

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