Jexcel选择倒数第二列附件选项时替换该行最后一列为文件输入框的实现

实现步骤 #

• 第一步：在jexcel初始化配置中新增onchange事件回调，专门监听倒数第二列（列索引为3，列从0开始计数）的取值变化。
• 第二步：当该列值变更为附件相关选项时，获取当前行的最后一列（列索引为4）单元格，清空原有内容，插入<input type="file">组件，同时禁用该单元格的默认编辑逻辑，避免触发原来的下拉组件。
• 第三步：如果需要支持切换回下拉组件，可增加判断逻辑，当倒数第二列选中非附件选项时，重新调用jexcel的setCellMeta方法恢复该单元格的下拉类型配置。

完整修改后的初始化代码 #

$('#mytable').jexcel({ 
    minDimensions: [1, 1],
    about:"",
    colWidths: [ 100, 100, 100, 100, 100],
    colHeaders: ['test1', 'test2', 'test3', 'test4', 'test5'],
    columns: [
        { type: 'dropdown', autocomplete:true },
        { type: 'numeric',  mask:'$ #,##.00'},
        { type: 'text' },
        { type: 'dropdown', source:['Zip code attachment','Custom attachment'] },
        { type: 'dropdown', filter: test,autocomplete: true, multiple:true, },
    ],
    // 新增列值变更监听
    onchange: function(instance, cell, colIndex, rowIndex, newValue, oldValue) {
        // 只处理倒数第二列的变更事件
        if (colIndex !== 3) return
        const lastColCell = instance.getCellFromCoords(4, rowIndex)
        // 判断是否选中附件相关选项
        if (newValue === 'Zip code attachment' || newValue === 'Custom attachment') {
            // 清空原有下拉内容
            $(lastColCell).html('')
            // 插入文件上传输入框，可按需添加name、accept等自定义属性
            $(lastColCell).append('<input type="file" name="table_attachment">')
            // 禁用单元格默认编辑逻辑，避免点击触发原有下拉
            instance.setCellMeta(4, rowIndex, 'readonly', true)
        } else {
            // 可选逻辑：切换回非附件选项时恢复原下拉组件
            instance.setCellMeta(4, rowIndex, 'readonly', false)
            instance.setValue(`R${rowIndex}C4`, '')
        }
    }
})

注意事项 #

• 如果需要处理上传的文件，可给插入的input绑定change事件，自行实现文件读取、上传的业务逻辑。
• 不同版本的jexcel如果存在API差异，可对应调整getCellFromCoords、setCellMeta的调用方式，核心逻辑不变。

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