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

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参数控制。

注意事项

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