原生JS甘特图插件MZGantt：多选下拉列表实现详解

列定义配置

在MZGantt中实现多选下拉列表功能，需在列定义对象中配置特定属性：

{
  name: "testCol4",
  field: "custCol",
  title: "myCol 3",
  width: 150,
  align: "left",
  type: "DropDownList",
  multiSelect: true,
  options: dropdownList
}

关键参数说明：

• type: "DropDownList" 声明该列为下拉列表类型
• multiSelect: true 启用多选模式(不设置时，默认为false)
• options 指定下拉选项数据源

选项数据格式

选项数据需为对象数组，每个对象包含value和text属性：

const dropdownList = [
  {"value": "00", "text": "篮球"},
  {"value": "01", "text": "羽毛球"},
  {"value": "02", "text": "乒乓球"},
  {"value": "03", "text": "足球"}
]

前端渲染处理

多选下拉列表在界面上的表现特征：

• 下拉框左侧显示多选标记（通常为复选框图标）
• 已选项会以特殊样式标记

效果展示

具体细节，您可以参考官网。