如何将下拉框向下的箭头隐藏，且功能不变

Richard.Ma

Richard.Ma · Richard.Ma

参考下面修改后的demo即可

隐藏下拉框.zip (66.07 KB, 下载次数: 480)

Richard.Ma · Richard.Ma

可以选择图片类型为自定义即可，同时调整一下下拉按钮宽度就行
image.png975679016.png

人本人云 · 人本人云

Richard.Ma 发表于 2022-8-26 18:21
可以选择图片类型为自定义即可，同时调整一下下拉按钮宽度就行

你好，请问在咱们的SpreadJS中怎么弹出这个“设置单元格格式”的框框呢？

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2022-8-29 10:49 编辑

这个对话框是在线表格编辑器中的，如果不使用在线表格编辑器的话，可以通过js 代码设置
设置cellButtons 中的imageType以及width即可

var style=new GC.Spread.Sheets.Style();
style.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.custom,
command: "openList",
useButtonStyle: true,
width:21
}
];
style.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
items: [
{
text: 'item1',
value: 'item1'
},
{
text: 'item2',
value: 'item2'
},
{
text: 'item3',
value: 'item3'
},
{
text: 'item4',
value: 'item4'
}
],
}
}
];
sheet.setStyle(1,1,style)

复制代码

人本人云 · 人本人云

Richard.Ma 发表于 2022-8-29 10:01
这个对话框是在线表格编辑器中的，如果不使用在线表格编辑器的话，可以通过js 代码设置
设置cellButtons ...

已上传demo,麻烦大佬给看下，框架Vue，node.js版本是14.12.1，npm版本6.14.8，谢谢

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2022-8-29 11:14 编辑

我看到你设置的是CellTypes.ComboBox,这个和上面讨论的下拉按钮是两种实现下拉框的方式

你截图中包括我下面发给你的代码，是通过style.cellButtons来实现的。

我把你的代码修改了一下，实际上还是我楼上发给你的代码，不要设置cellType，直接设置包含cellButtons和dropDowns设置的verticalStyle

image.png531435851.png

let verticalStyle = new GC.Spread.Sheets.Style();
verticalStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.custom,
command: "openList",
useButtonStyle: true,
width: 22,
},
];
verticalStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
items: [
{
text: "2.74",
value: 2.74,
},
{
text: "2.75",
value: 2.75,
},
{
text: "2.76",
value: 2.76,
},
{
text: "2.77",
value: 2.77,
},
{
text: "2.78",
value: 2.78,
},
{
text: "2.79",
value: 2.79,
},
{
text: "2.80",
value: 2.8,
},
],
},
},
];
var items2 = ["2.74", "2.75", "2.76", "2.77", "2.78", "2.79", "2.80"];
// var eComboBoxCellType = new GC.Spread.Sheets.CellTypes.ComboBox().items(items2).editable(true);
// activeSheet.getCell(2, 3).cellType(eComboBoxCellType);
/* activeSheet.setColumnWidth(0, 120);
activeSheet.setColumnWidth(2, 120); */
//不要设置上面的cellType，直接设置包含
activeSheet.getCell(2, 3).setStyle(verticalStyle);

复制代码

修改后的app.vue文件

app.vue (3.2 KB, 下载次数: 339)

人本人云 · 人本人云

Richard.Ma 发表于 2022-8-29 11:11
我看到你设置的是CellTypes.ComboBox,这个和上面讨论的下拉按钮是两种实现下拉框的方式

你截图中包括我 ...

麻烦问一下，如果下拉框设置成这样，打印出来的时候，会不会把数字背后的方框也打印出来？

Richard.Ma · Richard.Ma

你是说数字右侧的cellButtons吗，会打印出来，这个打印出来和目前界面上显示的是一致的，

image.png281639708.png

如果你想要打印时不打印这个按钮的话，目前只能是在打印前先重现设置style来去掉按钮，打印完成后再设置回来

人本人云 · 人本人云

Richard.Ma 发表于 2022-8-29 12:23
你是说数字右侧的cellButtons吗，会打印出来，这个打印出来和目前界面上显示的是一致的，

是的，打印的时候不能打印这个按钮，且，项目交付之后，甲方不懂怎么来回设置，有没有其他方法能解决一下。感谢

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

[已处理] 如何将下拉框向下的箭头隐藏，且功能不变

最佳答案

15 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人