X-editable checklist组件如何添加带自定义输入的other选项

实现思路是通过扩展X-editable的事件回调和参数处理逻辑，手动插入自定义输入框并联动勾选状态，不需要修改X-editable源码。

实现步骤 #

• 第一步：在checklist的数据源末尾添加值为特殊标识（比如__other__）的「其他」选项，避免和现有业务值冲突
• 第二步：监听shown事件，在checklist渲染完成后动态插入配套的文本输入框，默认隐藏
• 第三步：绑定「其他」选项的勾选变更事件，勾选时显示输入框，取消勾选时隐藏并清空输入内容
• 第四步：重写params回调，在提交数据时识别特殊标识，将输入框的自定义内容替换到最终提交的选中值数组中

代码示例 #

页面元素 #

<a href="#" id="demo-checklist" data-type="checklist" data-pk="1" data-title="请选择选项"></a>

初始化逻辑 #

// 预设选项列表，最后添加其他选项
const checklistSource = [
  {value: 'opt1', text: '选项一'},
  {value: 'opt2', text: '选项二'},
  {value: 'opt3', text: '选项三'},
  {value: '__other__', text: '其他'}
]

$('#demo-checklist').editable({
  source: checklistSource,
  // 自定义提交参数处理
  params: function(params) {
    const selectedVals = params.value
    // 检测是否选中了其他选项
    if (selectedVals.includes('__other__')) {
      const otherInputVal = $('.editable-checklist .other-custom-input').val().trim()
      // 移除特殊标识，替换为用户输入的自定义值
      selectedVals.splice(selectedVals.indexOf('__other__'), 1)
      if (otherInputVal) {
        selectedVals.push(otherInputVal)
      }
    }
    return params
  }
// 监听弹窗渲染完成事件
}).on('shown', function(e, editable) {
  const $checklistContainer = editable.input.$input
  // 避免重复插入输入框
  if ($checklistContainer.find('.other-custom-input').length === 0) {
    $checklistContainer.append(`
      <div class="other-input-wrap" style="margin: 8px 0 0 20px; display: none;">
        <input type="text" class="other-custom-input form-control input-sm" placeholder="请输入自定义内容">
      </div>
    `)
  }
  const $otherInputWrap = $checklistContainer.find('.other-input-wrap')
  const $otherCheckbox = $checklistContainer.find('input[value="__other__"]')

  // 初始加载时判断是否需要显示输入框
  if ($otherCheckbox.is(':checked')) {
    $otherInputWrap.show()
  }

  // 绑定其他选项的勾选事件
  $otherCheckbox.on('change', function() {
    if ($(this).is(':checked')) {
      $otherInputWrap.show()
    } else {
      $otherInputWrap.hide()
      $otherInputWrap.find('.other-custom-input').val('')
    }
  })
})

额外优化说明 #

• 如果需要支持回显自定义的其他值，初始化时可以先判断当前已选中值是否不在预设的checklistSource里，如果匹配到自定义值，就自动把__other__加入初始选中列表，同时将自定义值回填到输入框中
• 可以根据项目的UI规范调整输入框的样式，保证和原有checklist组件风格统一

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