登录/注册

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容

218 主题	1万帖子	1万积分

Rank: 8 Rank: 8

积分: 15962

85633
金币
218
主题
10074
帖子

最新发帖

级联选择单元格

讲师达人认证

悬赏达人认证

SpreadJS 开发认证

超级版主 / 发表于：2020-2-3 15:07 / 查看：3813 / 回复：0

背景：通过级联选择的单元格，达到填报时候能够进行二级甚至多级的选择。使填报更加友好
思路：
利用单元格类型中的combobox单元格，再利用监听事件ValueChanged，在事件中进行判断并更换下一级下拉菜单的选项
核心代码：

var combo1 = new GC.Spread.Sheets.CellTypes.ComboBox();
combo1.items([
{ text: '张老师', value: 'MrZhang' },
{ text: '王老师', value: 'MrWang' },
{ text: '李老师', value: 'MrLi' }]);
sheet.setCellType(3, 2, combo1, GC.Spread.Sheets.SheetArea.viewport);
combo1.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
var combo2 = new GC.Spread.Sheets.CellTypes.ComboBox();
combo2.items([
{ text: '英语', value: 'English' },
{ text: '语文', value: 'Chinese' },
{ text: '数学', value: 'Math' }]);
combo2.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
sheet.setCellType(3, 3, combo2, GC.Spread.Sheets.SheetArea.viewport);
sheet.setValue(3,2,"MrZhang");
sheet.setValue(3,3,"English");
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
var row = info.row;
var col = info.col;
if(row==3&&col==2){
var value = info.newValue;
if(value == "MrZhang"){
combo2.items([
{ text: '英语', value: 'English' },
{ text: '语文', value: 'Yuwen' },
{ text: '数学', value: 'Shuxue' }]);
sheet.setValue(3,3,"English");
}
if(value == "MrWang"){
combo2.items([
{ text: '历史', value: 'Lishi' },
{ text: '地理', value: 'Dili' },
{ text: '政治', value: 'Zhengzhi' }]);
sheet.setValue(3,3,"Lishi");
}
if(value == "MrLi"){
combo2.items([
{ text: '体育', value: 'Tiyu' },
{ text: '音乐', value: 'Yinyue' },
{ text: '美术', value: 'Meishu' }]);
sheet.setValue(3,3,"Tiyu");
}
}
});

复制代码

完整示例见附件

级联combobox.html

2.53 KB, 下载次数: 155

收藏

回复

点击查看 -->【预览版体验】SpreadJS v16.0 预览版 - 新文件结构

0 个回复