# SpreadJS_DropDownBox
**Repository Path**: GrapeCity/SpreadJS_DropDownBox
## Basic Information
- **Project Name**: SpreadJS_DropDownBox
- **Description**: 添加下拉框选则表单功能
- **Primary Language**: CSS
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-27
- **Last Updated**: 2022-07-07
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# SpreadJS_DropDownBox
添加下拉框选则表单功能
### SpreadJS 示例，扩展工作表Tab右键功能-实现选择工作表下拉框
该示例包括使用 SpreadJS API 的演示脚本，可用于实现扩展工作表Tab右键功能-实现选择工作表下拉框
有关 SpreadJS API 的更多信息，请参阅[SpreadJS API指南]( https://demo.grapecity.com.cn/spreadjs/help/api/) 和[帮助手册]( https://help.grapecity.com.cn/pages/viewpage.action?pageId=5963808)。
### 运行步骤
1、在开始之前，请确保您已满足以下先决条件：
要运行 SpreadJS，浏览器必须支持 HTML5，客户端导入和导出 Excel 需要 IE10及以上。
请先了解 [SpreadJS 的产品使用环境]( https://www.grapecity.com.cn/developer/spreadjs/selection-guide/product-use-environment)，并申请临时部署授权激活
安装并更新NodeJS和NPM
2、克隆或下载此代码库
3、初始化控件，并运行示例脚本
#### 控件初始化
首先，创建一个新页面，并在页面上输入以下代码：
```
SpreadJS HTML Test Page
```
2、在页面中添加对 SpreadJS 的引用。代码如下。需要注意的是，SpreadJS 提供压缩过
```
//（minified）的 JavaScript 文件和和用于调试的文件：
```
3、添加 CSS 文件以改变Spread.JS 的外观。默认的CSS文件名为：
gc.spread.sheets.xxxx.css，里面包含了所有的默认样式。该 CSS 文件将会影响滚动条，筛选框及其子元素，单元格和下方标签栏的样式。引入 CSS 的代码如下：
```
//
```
4、添加产品授权，代码为（本地测试可以不添加）：
```
GC.Spread.Sheets.LicenseKey = "xxx";
```
5. 添加控件初始化代码。本例会在一个 id 为 “ss” 的 DOM 元素上初始化 SpreadJS：
```
```
6、 创建一个 id 为 “ss” 的元素，SpreadJS 将在该 DOM 中初始化：
```
```
#### 示例代码
```
HTML：
扩展工作表Tab右键功能-实现选择工作表下拉框
在工作表名称处右键可以看到选择表单的选项
CSS：
#ss{
width: 100%;
height: 360px;
}
p{
color: #336699;
text-align: center;
}
JavaScript：
// Title:选择表单对话框
// Description：表单名称右键选择表单对话框
// Tag:表单名称，对话框
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 20
});
var openDialog = {
text: "选择工作表",
name: "selectSheetDialog",
command: selectSheetDialog,
workArea: "sheetTab"
};
spread.contextMenu.menuData.push(openDialog);
};
function selectSheetDialog(spread) {
console.log(arguments)
if (document.getElementsByClassName('sheetListBox').length === 0) {
var sheetListBox = document.createElement('div');
sheetListBox.className = 'sheetListBox';
sheetListBox.innerHTML = '' +
'' +
'
' +
'';
document.body.appendChild(sheetListBox);
document.getElementById('cancelBtn').onclick = function() {
sheetListBox.style.display = 'none';
};
document.getElementById('sheetSelectList').onchange = function() {
var selectIndex = this.selectedIndex;
spread.setActiveSheetIndex(selectIndex);
spread.startSheetIndex(selectIndex);
sheetListBox.style.display = 'none';
};
}
var sheetSelectList = document.getElementById('sheetSelectList');
sheetSelectList.innerHTML = "";
for (var i = 0; i < spread.sheets.length; i++) {
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = spread.sheets[i].name();
sheetSelectList.appendChild(opt);
}
var loginBoxEle = document.getElementsByClassName('sheetListBox')[0];
if (loginBoxEle.style.display === 'none') {
loginBoxEle.style.display = 'block';
}
}
```
#### 关于 SpreadJS
[SpreadJS]( https://www.grapecity.com.cn/developer/spreadjs) 是一款基于 HTML5 的纯前端表格控件，兼容 450 多种 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性。使用 SpreadJS，可直接在 Angular、 React、 Vue 等前端框架中实现高效的模板设计、在线编辑和数据绑定等功能，为最终用户提供高度类似 Excel 的使用体验。
