前端表格控件SpreadJS 设置单元格子编辑框
SpreadJS表格控件的4种排序方法
if(value !== null && value >= 10 && value <= 5 0){ //Return True only when the following cond itions are satisfied.
// (1)Values are entered. // (2)Values are not lower than 10. // (3)Values are not greater than 50. return true; }else{ return false; } }, toJSON:function(){ var jsonData = {}; jsonData.conditionType = this.conditionTyp e; jsonData.type = "CustomFilter"; return jsonData; }, fromJSON:function(data){
activeSheet.setValue(1, 1, 40); activeSheet.setValue(2, 1, 10); activeSheet.setValue(3, 1, 20); activeSheet.setValue(4, 1, 10); activeSheet.setValue(5, 1, 40);
排序前：
排序后：
2.使用多个关键字进行排序
$(document).ready(function () { var spread = new GcSpread.Sheets.Spread($("#ss").get (0),{sheetCount:3}); var activeSheet = spread.getActiveSheet(); activeSheet.setRowCou nt(6); activeSheet.setValue(0, 0, 10); activeSheet.setValue(1, 0, 100); activeSheet.setValue(2, 0, 100); activeSheet.setValue(3, 0, 10); activeSheet.setValue(4, 0, 5); activeSheet.setValue(5, 0, 10); activeSheet.setValue(0, 1, 10);
sheetjs 单元格样式
sheet.js 单元格样式Sheet.js是一个用于处理电子表格的JavaScript库。
它允许你读取、写入、修改和处理电子表格文件。
在Sheet.js中，你可以使用以下方法来设置单元格的样式：### 设置单元格样式1. **字体样式：**- 可以设置字体的大小、颜色、加粗等样式。
```javascript// 设置字体大小和颜色worksheet.getCell('A1').font = { size: 14, color: { argb: 'FF0000' } };// 设置为粗体worksheet.getCell('B2').font = { bold: true };```2. **边框样式：**- 可以设置单元格的边框样式。
```javascript// 设置边框worksheet.getCell('C3').border = {top: { style: 'thin' },left: { style: 'thin' },bottom: { style: 'thin' },right: { style: 'thin' }};```3. **背景颜色：**- 可以设置单元格的背景颜色。
```javascript// 设置背景颜色worksheet.getCell('D4').fill = {type: 'pattern',pattern: 'solid',fgColor: { argb: 'FFFF00' } // 黄色背景};```4. **文本对齐：**- 可以设置文本在单元格中的对齐方式。
```javascript// 设置文本居中对齐worksheet.getCell('E5').alignment = { horizontal: 'center', vertical: 'middle' };```5. **数字格式：**- 可以设置单元格中数字的显示格式。
表格控件SpreadJS如何设置斜线分割单元格
表格控件 SpreadJS 如何设置斜线分割单元格
SpreadJS 虽然没有提供接口在单元格中绘制斜线单元格，但是想要做出斜线单 元格的效果是非常简单的。 我们只需要自定义一个单元格，在画布中画一条斜线，然后写上文字即可，下面 直接看代码吧。 var activeSheet = spread.getActiveSh.height(80) activeSheet.getColumn(0).width (200) var myCellType = new MyCellType(); activeSheet.getCell(0, 0).cellType(myCellType) function MyCellType() {} MyCellType.prototype = new GcSpread.Sheets.CustomCellType(); MyCellType.prototype.paint = function(ctx, value, x, y, w, h, s tyle, options) { //Paints a cell on the canvas. if (!ctx) { return; } ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); // 绘制斜线 ctx.lineTo(x + w, y + h); ctx.stroke(); ctx.font = style.font; // 绘制文字 ctx.fillText("Hello World1", x + w * 7 / 8, y + h / 3); ctx.fillText("Hello World2", x + w / 2, y + h * 3 / 4); ctx.restore(); }; 看到代码后感到很简单吧，我们只需要从单元格位置(x, y) 画一条线到单元右下 角位置(x + w, y + h)。然后在斜线两边适当位置，填充文字就好了。
owc之spreadsheet单的元格的格式操作及其它
owc之spreadsheet单的元格的格式操作及其它1. 技术要点1.1. Excel试验：A. Excel嵌⼊⽹页的⽅法。
1. 在后台⽤流的⽅式返回给前台页⾯展现；2. 在后台讲Excel格式数据定好保存到本地，在前台页⾯⽤html标签加载展⽰；B. Excel显⽰格式的控制。
1. Excel单元格格式设置，默认为常规类型；2. 上下标格式的控制；3. 单元格⽔平垂直对齐⽅式；4. 单元格边框设置；5. 单元格合并；6. 字体设置，包括字体的颜⾊、⼤⼩、粗体、斜体、字体、下划线等；7. 冻结⾏列；8. 公式栏的显⽰与隐藏；9. ⾏标题和列表题的显⽰与隐藏；10. ⽹格的显⽰与隐藏；11. ⽔平滚动条和垂直滚动条的显⽰与隐藏；12. Sheet页的显⽰与隐藏；C. 向Excel中填充数据，并导出为临时⽂件。
1.2. OWC试验：A. OWC组件在web页⾯展⽰的⽅法。
1. 将OWC中Sheet导出为本地Excel⽂件，再将导出的⽂件呈现到Web页⾯；2. 后台把配置好的Sheet直接以流⽂件⽅式返回到Web页⾯展现；3. ⽤html标签将OWC展现在Web页⾯，加载后台程序导出到本地的⽂件（xml、html、csv格式）来显⽰数据；B. 在OWC中的电⼦表格类中填充数据的⽅法。
C. OWC中显⽰数据格式的控制。
1. 电⼦表格外观控制：⼯具栏的显⽰、Office图标的显⽰、列标题的显⽰、⾏标题的显⽰、⽔平滚动条的显⽰、垂直滚动条的显⽰、⽹格的显⽰、⽹格颜⾊设置；2. 单元格⽔平对齐⽅式；3. 单元格垂直对齐⽅式；4. 单元格合并；5. 单元格字体设置：字体、字形、字号、字体颜⾊、字体加粗、下划线（多种样式）；6. 单元格边框设置；2. 主要模块2.1. Excel1、Excel嵌⼊⽹页的⽅法：A、将后台定制好的Excel⽂件在后台⽤流的⽅式返回给前台页⾯展现，代码如下：Response.ClearContent();Response.ClearHeaders();Response.ContentType = "application/vnd.ms-excel";Response.AddHeader("Content-Disposition", "inline;filename='我的⽂件'");Response.WriteFile(FileName);//FileName为Excel⽂件所在地址Response.Flush();Response.Close();运⾏效果：整个页⾯都充满了Excel。
SpreadJS纯前端表格控件V11-SP1支持npm安装
概述SpreadJS V11SP1 正式发布到npm，项目中使用SpreadJS 将更加方便优雅。
您可以通过命令npm install @grapecity/spread-sheets 引用spread.sheets 资源。
Excelio、PDF、chart 以及语言资源都是独立package，需要单独安装。
（原文链接）以webpack 项目为例，下面将展示如何使用Spread.Sheets。
1、安装Node.js 和Npm2、新建"spreadjs_webpack"文件夹3、在文件夹中通过npm 命令创建一个新的工程输入"npm init -y" 创建package.json1.{2."name": "spreadjs_webpack",3."version": "1.0.0",4."description": "",5."main": "index.js",6."scripts": {7."test": "echo "Error: no test specified" && exit 1"8.},9."keywords": [],10."author": "",11."license": "ISC"12.}13.复制代码4、安装webpack输入命令"npm install webpack --save-dev" 输入命令"npm install webpack-cli --save-dev"5、创建如下结构及文件spreadjs_webpack1.|- package.json2.|- webpack.config.js3.|- /dist4.|- index.html5.|- /src6.|-index.js7.复制代码package.json1.{ "name": "spreadjs_webpack",2."version": "1.0.0",3."description": "",4."main": "index.js",5."scripts": {6."build": "webpack --config webpack.config.js"7.},8."keywords": [],9."author": "",10."license": "ISC",11."devDependencies": {12."webpack": "^4.5.0",13."webpack-cli": "^2.0.14"14.}15.}16.复制代码index.html1.<!DOCTYPE html>2.<html lang="en">3.4.<head>5.<meta charset="UTF-8">6.<title>SpreadJS Development</title>7.<script src="bundle.js"></script>8.</head>9.10.<body>11.<div id="ss" style="width:80%;height:80vh;border:1px solidlightgray"></div>12.</body>13.14.</html>15.复制代码6、安装Spread.Sheets输入命令"npm install @grapecity/spread-sheets --save"安装完成后您会在package.json kandao "@grapecity/spread-sheets":"^11.1.0"spread.sheets npm 模块会安装在"node_modules-> @grapecity -> spread-sheets" 文件夹中。
SpreadJS类Excel表格控件单元格编辑事件分析
SpreadJS类Excel表格控件单元格编辑事件分析我们知道SpreadJS提供了60多个事件供开发者使用，这么多事件具体用哪一个，该怎么选择？只有了解了每个事件的触发时机和返回内容我们才能做出做好的选择。
下面我们讲解下有关编辑单元格内容的三个事件ValueChanged、RangeChanged和CellChanged。
1. ValueChangedOccurs when the value in the subeditor changes.当单元格的subeditor的值发生变化时触发。
也就是说当我们通过进入编辑状态改变单元格内容时将触发此事件。
事件中我们可以接收到sheet、sheetName、row、col、newValue和oldValue。
但是如果我们是复制，粘贴，拖拽生成内容，并不会触发ValueChanged事件。
不触发ValueChanged有两个原因，一方面复制粘贴是用户的操作行为，ValueChanged是数据相关的事件，另一方便，复制粘贴等行为可以是区域性的，如果区域内每个单元格都发送事件是对性能的很大损耗。
那我们想要接受到用户复制粘贴操作带来的单元格内容变化可以使用下面的事件。
2. RangeChangedOccurs when the cell range has changed.这里的cell range change 并不是说选择区域发生了变化，而是指一个区域内的数据发生了变化，选择区域发生变化的事件是SelectionChanged。
用户的粘贴，拖拽填充，移动以及直接Delete删除都会触发RangeChanged 事件。
当用户对区域操作一次只触发一次。
在时间中我们可以接收到sheet, sheetName, row, column, rowCount, columnCount, changedCells, action信息。
通过action我们可以知道是何种操作导致的事件。
excel中activex 控件组合框控件的使用方法
excel中activex 控件组合框控件的使用方法在Excel 中，ActiveX 控件组合框（ComboBox）是一种常用的交互式工具，可用于创建下拉菜单或选择列表。
以下是ActiveX 控件组合框的基本使用方法：插入组合框：打开Excel 文档，切换到“开发者”选项卡（如果没有该选项卡，你需要启用它），然后选择“插入” -> “ActiveX 控件” -> “组合框”。
在工作表上绘制组合框。
设置属性：在设计模式下，右键单击组合框，选择“属性”以打开属性窗口。
在属性窗口中，你可以设置组合框的名称、字体、大小等属性。
添加选项：通过双击组合框，或者在设计模式下右键单击组合框选择“属性” -> “Items” 来添加选项。
在"Items" 属性框中，你可以输入组合框的各个选项，每个选项占一行。
编写VBA 代码：如果你想通过VBA 代码来动态控制组合框，可以在"开发者" 选项卡中选择"Visual Basic"，然后编写相应的VBA 代码。
处理事件：组合框可以触发多个事件，比如Change、Click 等。
你可以通过VBA 代码处理这些事件。
在VBA 编辑器中，选择组合框，然后选择相应的事件，编写处理代码。
调整样式：你可以通过修改组合框的属性来调整其外观，比如设置背景颜色、字体颜色等。
运行模式：在设计模式下，你可以编辑和设置组合框的属性。
在运行模式下，你可以与组合框交互并查看效果。
删除组合框：如果不再需要组合框，可以在设计模式下右键单击组合框，选择“剪切”或“删除”来删除它。
通过这些步骤，你可以在Excel 中成功使用ActiveX 控件组合框，并实现相应的交互功能。
SpreadJS表格控件的4种排序方法
$("#button2").click(function(){ //Create a SortInfo object where 1st Key:Column1 /2nd Key:Column2. var sortInfo = [ {index:0, ascending:false}, {index:1, ascending:false}]; ///Execute sorting which targets all rows based o n the created sorting conditions. $("#ss").data("spread").getActiveSheet().sortRan ge(0, -1, 6, -1, true, sortInfo); }); });
activeSheet.setValue(1, 1, 40); activeSheet.setValue(2, 1, 10); activeSheet.setValue(3, 1, 20); activeSheet.setValue(4, 1, 10); activeSheet.setValue(5, 1, 40);
$("#button1").click(function(){ //Create a SortInfo object where 1st Key:Column1 /2nd Key:Column2. var sortInfo = [ {index:0, ascending:true}, {index:1, ascending:true}]; ///Execute sorting which targets all rows based o n the created sorting conditions. $("#ss").data("spread").getActiveSheet().sortRan ge(0, -1, 6, -1, true, sortInfo); });
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端表格控件SpreadJS 设置单元格子编辑框
在填报数据时，可能需要对数据进行查询然后再填入单元格中，那么我们可以使用SubView的方式弹出一个子页面进行查找设置。
为了简单起见，示例中我们使用了BootStrap 的Modal组件，当用户双击单元格进入编辑模式后即可开始Modal，用户输入内容点击提交，将输入值返回Spread。
首先我们在页面中加入SubView的模板，这里我们为modal设置了gcUIElement="gcEditingInput" 的属性，这个属性的作用是告诉Spread，这个DOM元素是Spread的编辑元素，设置了之后在此div中点击，Spread都不会退出编辑状态。
然后，我们在进入编辑状态事件中获取单元格Value，赋值到subView。
当SubView点击set Value时，再设置Cell 新的Value 同时退出编辑状态并关闭Modal。