【纯JS甘特图插件MZGantt】实现带图标的下拉列表框，只需2步

MZGantt中，如何实现如图的下拉列表框？

具体步骤非常简单，如下：

步骤1. 资源列表定义

var resourceList = [
    {"value":"1","text":"郭富城", src:"./images/1.png"},
    {"value":"2","text":"黎明", src:"./images/2.png"},
    {"value":"3","text":"刘德华", src:"./images/3.png"},
    {"value":"4","text":"张学友", src:"./images/4.png"}
];

步骤2. 列配置参数

{
    name: 'resId',
    field: "resId",
    title: "PIC",
    width: 100,
    options: resourceList,
    editable: true,
    type: "DropDownList",
    show: "icon",
    multiSelect: true
}

关键参数说明

• show 参数可选值：
  • icon：仅显示图标
  • text：仅显示文本
  • both：同时显示图标和文本
• multiSelect 参数：
  • true：支持多选
  • false：仅支持单选（默认值）

效果说明
配置后将生成带图标的下拉选择框，用户可通过点击下拉箭头展开选项列表。选项支持根据show参数显示不同内容样式，选择模式由multiSelect参数控制。

注意事项

• 图片路径需确保正确可访问
• 图标建议使用统一尺寸以获得最佳显示效果