下拉框使用问题集锦

收藏 · 2022-11-15 14:25 上传

本帖最后由 Ellia.Duan 于 2023-12-29 11:20 编辑

SpreadJS目前提供了四种方式去使用下拉框，可以参考这篇文章：
https://gcdn.grapecity.com.cn/showtopic-169429-1-1.html

了解到如何创建下拉框之后，下面总结下下拉框一些使用场景与问题
1、ComboBox自适应下拉框内容
有时候用户发现下拉框内容过长，而列宽不够时，出现遮挡情况。
所以希望可以自适应换行。

var data = {
items: [
{
text: 'Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange ',
value: 'Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange Orange '
},
{
text: 'Apple',
value: 'Apple',
},
{
text: 'Banana',
value: 'Banana'
}
]
};
var style = new GC.Spread.Sheets.Style();
style.wordWrap = true;
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true,
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: data
}
];
sheet.setStyle(3, 4, style);

复制代码

执行上述代码后，发现第一项内容过长，如果选中第一项，则出现内容不完整情况，如下图

image.png159762877.png

此时我们可以在ValueChanged事件中，对此行进行高度自适应，如下代码

sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
info.sheet.autoFitRow(info.row)
});

复制代码

执行后，刷新页面，此时再选中第一项，执行效果如下：
image.png409740294.png

2、ComboBox下拉框数据从后端获取，
有时候用户希望下拉框数据可以异步获取，通过http请求获取下拉框数据资源。
此时可以使用如下代码来实现：

const combo = new spreadNS.CellTypes.ComboBox();
combo
.editorValueType(spreadNS.CellTypes.EditorValueType.text);
sheet.setValue(0, 3, "Result:");
sheet.getCell(1, 2, spreadNS.SheetArea.viewport).cellType(combo);
sheet.bind(GC.Spread.Sheets.Events.EditStarting, function (sender, args) {
const {row, col} = args;
if (row == 1 && col == 2) {
let arr = [];
$.ajax(
{
async: false, url: "http://127.0.0.1:3000/list", success: function (result) {
result.map(select => {
arr.push( {
text: select.name,
value: select.id,
})
})
console.log(result);
combo.items(arr);
}
});
}
});

复制代码

3、ComboBox下拉框允许修改，且修改后变为下拉框值的一部分

const combo = new spreadNS.CellTypes.ComboBox();
combo
.editorValueType(spreadNS.CellTypes.EditorValueType.text);
combo.editable(true);
combo.items([{text: 'orange', value: 'orange'}])
sheet.setValue(0, 3, "Result:");
sheet.getCell(1, 2, spreadNS.SheetArea.viewport).cellType(combo);
sheet.bind(GC.Spread.Sheets.Events.ValueChanged, function (e, info) {
const row = info.row, col = info.col;
let currentValue = sheet.getValue(row, col)
var cellType = sheet.getCellType(row, col);
var items = cellType.items();
if (cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) {
if (items.length > 0) {
let result = false;
items.forEach(item => {if (item.text == currentValue) result = true;});
if (!result) {
items.push({text: currentValue, value: items})
}
} else {
items.push({text: currentValue, value: items})
}
}
});

复制代码

4、下拉框模糊搜索
https://gcdn.grapecity.com.cn/showtopic-131931-1-1.html

5、下拉框根据值绑定，修改对应区域的值
https://gcdn.grapecity.com.cn/fo ... 5680&extra=page%3D2

6、ComboBox设置背景色
有用户发现为单元格设置背景色如黄色，随之下拉框也出现黄色，如下图所示：
image.png374421996.png

此时如果不希望下拉组件保持原来的白色背景，可以加这么几行代码：

div[gcuielement="gcDropDownWindow"]{
background-color: white !important;
}

复制代码

7、List 修改样式
可以参考这篇文章：https://gcdn.grapecity.com.cn/showtopic-139216-1-19.html

		自动登录	找回密码
密码			立即注册

下拉框使用问题集锦

0 个回复

SpreadJS 认证

SpreadJS 高级认证