前端表格控件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纯前端表格控件是基于html5的javascript电子表格和网格功能控件适用于
表格控件 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); });

SpreadJS类Excel表格控件自定义数据验证

netjava和移动端等各平台在线编辑类excel功能的表格程序开spreadjs提供了丰富的数据验证功能可以像excel一样在未通过验证时高亮提示也可以在提交数据前调用接口检查数据合法性
SpreadJS 类 Excel 表格控件自定义数据验证
在 SpreadJS 中有数据验证功能，可以像 Excel 一样在未通过验证时高亮提示，也可以在提交数据前调用接口检查数据合法性。同时我们也可以自定义数据验证规则，实现业务所需的特定逻辑。
2. 初始化验证条件，并将添加加入验证器中，在单元格设置验证器。
var cCondition = new CustomerCondition(GcSpread.Sheets.GeneralC ompareType.EqualsTo, 4); var validator1 = new GcSpread.Sheets.DefaultDataValidator(cCond ition); validator1.inputTitle = 'Please choose '; validator1.ignoreBlank =false; validator1.type = GcSpread.Sheets.CriteriaType.Custom; activeSheet.setDataValidator(3,3, validator1); activeSheet.setDataValidator(3,4, validator1); spread.highlightInvalidData(true); activeSheet.setValue(3, 3, -1); activeSheet.setValue(3, 4, 4);
1. 自定义验证条件，在 evaluate 方法中我们加入所需逻辑，返回验证结果即可，示例中只要等于期待值即为通过验证。 function CustomerCondition(compareType, expected, formula){ var self = this; self.ignoreBlank = false; self.conditionType = "CustomerCondition"; pareType = compareType; self.expected = expected; self.formula = formula; }; CustomerCondition.prototype = new GcSpread.Sheets.CellValueCond ition(); CustomerCondition.prototype.evaluate = function(evaluator, base Row, baseColumn, actualValue){ if(actualValue === this.expected){ return true; } else{ return false; } }

SpreadJS表格控件实现双色文字单元格教程

SpreadJS表格控件实现双色文字单元格教程
SpreadJS表格控件像Excel一样，拥有类似下面的特征：
•中规中矩的单行列头
•每行元素都是平级显示
•一个单元格只使用一种颜色
•最下端可以选择不同的工作表
•垂直和水平滚动条
•Excel传统外观风格
今天，就来颠覆下大家的印象。

先来看下下图：
咦？这张图哪里有电子表格的影子，完全是个TreeGrid嘛！
木有滚动条，木有多工作表，列头有两行还带合并。

不仅有层次分明的树形结构，而且一个单元格里面既有节点三角形、文件夹或文件形状的图片，还有描述文字。

更神奇的是，“任务编码“一列，居然还有黑红两色文字同时显示。

这个拥有双色文字单元格的TreeGrid就是SpreadJS变身而来。

下面我们就来揭秘SpreadJS究竟是如何变身的：
1. 外观
SpreadJS不仅支持JQueryUI默认的25种外观，而且还支持随意定制各部分的颜色。

这么多酷炫的外观，需要写多少代码实现呢？什么？！一句代码足矣：
2. 隐藏滚动条和单工作表显示风格
需要隐藏的滚动条和多工作表区域如下图：
实现代码如下：
3. 设置两行列头，并实现列头单元格的合并希望实现的效果如下图：
实现代码如下：
4. 双色文字自定义单元格
希望实现的效果如下图：
实现核心代码如下：
5. 树节点自定义单元格
希望实现的效果如下图，有展开/折叠三角标志，文件夹和文件图片，并带有描述文字。

实现核心代码如下：
SpreadJS变身双色文字TreeGrid, 就这样完成了。

excel vba 单元格边框设置技巧

excel vba 单元格边框设置技巧1. 边框样式Sub cell_format()Dim sht As WorksheetDim rng As RangeSet sht = Worksheets("Parameter")Set rng = sht.Range("B2:C20")' 设置边框格式' 这是常规的实线、细线，默认颜色为黑色rng.Borders.LineStyle = xlContinuousEnd Sub结果如下：这里的xlContinuous代表着一种默认的Excel边框风格，总共有以下几种：除了直接用各种风格的名字外，也可以使用它对应的值来代替。

有兴趣的杺尝试下不同的边框风格，看看效果。

2. 边框颜色rng.Borders.ColorIndex = 3或者rng.Borders.Color = RGB(0, 255, 0)前面一种是直接使用VBA内置的几种颜色值，后一种则可以直接使用RGB颜色，可以实现更高的个性化。

VBA内置的颜色及对应的值如下：所以示例代码中，ColorIndex = 3，即表示使用的是红色。

结果如下：3. 边框宽度（在做这一步之前，我把前面的边框给清掉了）rng.Borders.Weight = xlThick这里的xlThick也是一种内置的属性，共有以下几种：同样的，也可以使用它们对应的值来代替。

结果如下4. 单边框单边框，也就是只要一个方向有边框。

只要在前面例子中的Borders后面加上括号，在括号内指定边就行了，其它设置不变：rng.Borders(xlEdgeBottom).LineStyle = xlContinuous结果如下：这里代码里面使用的xlEdgeBottom表示下边框的意思，但要提醒的是，这个“下边框”指的是整个单元格区域（B2:C20）的底部边框，而不是“这个区域内部所有单元格的底部边框”。

SpreadJS表格控件如何自适应页面大小

SpreadJS前端控件如何自适应页面大小
SpreadJS在页面中往往占据了很大空间，那么如何才能让SpreadJS自适应页面大小呢？
我们创建SpreadJS时只需要在页面创建一个div即可，那么这个div的大小就决定了页面生成后spreadJS窗体的大小。

所以我们需要让SpreadJS自适应页面大小也就只需要设置这个div的样式使其适应页面大小即可。

我们设置SpreadJS容器宽度为页面90%,高度80%。

同时我们设置margin: 0 auto;是其水平居中显示。

这里需要注意的是SpreadJS 高度80%是相对于body的高度，所以我们需要提前设置body高度为100%这样才能达到效果。

如此，SpreadJS就能做到自适应页面大小，赶快试试吧。

表格开发控件SpreadJS单元格数据绑定

{ name: "line", displayName: "Line", cellType: l ineCellType, size: 80 },
{ name: "color", displayName: "Color", cellType: colorCellType },
{ name: "price", displayName: "Price", formatte r: "0.00" },
.vAlign(GcSpread.Sheets.VerticalAlign.center);
sheet.defaults.rowHeight = 23;
var columnCount = sheet.getColumnCount();
sheet.addColumns(columnCount, 2);
{
rce()[clickRow];
var clickItem = clickSheet.getDataSou
_dummySource.id = clickItem.id;
_ = ;
_dummySource.line = clickItem.line;
initCellLevelBind(spread.getSheet(1));
sheet.getColumn(0).visible(false);
sheet.getColumn(7).visible(false);
sheet.setIsProtected(true);
alse);
sheet.getColumn(sheet.getColumnCount() - 1).locked(f

前端表格控件SpreadJS 设置单元格子编辑框

前端表格控件SpreadJS 设置单元格子编辑框
在填报数据时，可能需要对数据进行查询然后再填入单元格中，那么我们可以使用SubView的方式弹出一个子页面进行查找设置。

为了简单起见，示例中我们使用了BootStrap 的Modal组件，当用户双击单元格进入编辑模式后即可开始Modal，用户输入内容点击提交，将输入值返回Spread。

首先我们在页面中加入SubView的模板，这里我们为modal设置了gcUIElement="gcEditingInput" 的属性，这个属性的作用是告诉Spread，这个DOM元素是Spread的编辑元素，设置了之后在此div中点击，Spread都不会退出编辑状态。

然后，我们在进入编辑状态事件中获取单元格Value，赋值到subView。

当SubView点击set Value时，再设置Cell 新的Value 同时退出编辑状态并关闭Modal。

SpreadJS表格控件如何自适应页面大小

SpreadJS前端控件如何自适应页面大小
SpreadJS在页面中往往占据了很大空间，那么如何才能让SpreadJS自适应页面大小呢？
我们创建SpreadJS时只需要在页面创建一个div即可，那么这个div的大小就决定了页面生成后spreadJS窗体的大小。

所以我们需要让SpreadJS自适应页面大小也就只需要设置这个div的样式使其适应页面大小即可。

我们设置SpreadJS容器宽度为页面90%,高度80%。

同时我们设置margin: 0 auto;是其水平居中显示。

这里需要注意的是SpreadJS 高度80%是相对于body的高度，所以我们需要提前设置body高度为100%这样才能达到效果。

如此，SpreadJS就能做到自适应页面大小，赶快试试吧。

Extjs4.2 Grid单元格编辑

Extjs4.2 Grid单元格编辑效果图：实现代码：TcodeoneRowView.js/***@Description代码生成器-单表-行编辑模式视图层*@author张川(cr10210206@)*@date2014-01-1311:22:12*/Ext.define(zc.createView('test.TcodeoneRowView'),{ extend : 'Ext.panel.Panel',alias : 'widget.view_test_TcodeoneRowView',//视图别名layout : 'border',border : 0,items : [{region : 'north',xtype : 'panel',height : 0,border : 0,items : [{'xtype' : 'hiddenfield','id' : 'view_test_TcodeoneRowView_tbar_storeCount' }]},{region : 'center',xtype : 'gridpanel',layout : 'fit',border : 0,forceFit : true,//自动填充单元格selType : 'checkboxmodel',//多选框模式columns : [{dataIndex : 'id',text : '编号',width : 100,align : 'center',sortable : false,hidden : true,hideable : false},{dataIndex : 'name',text : '姓名',width : 100,align : 'center',sortable : false,editor : {xtype : 'textfield'}},{dataIndex : 'birthday',text : '出生日期',width : 100,align : 'center',sortable : false,renderer : Ext.util.Format.dateRenderer('Y-m-d'),editor : {xtype : 'datefield',format : 'Y-m-d'}},{dataIndex : 'status',text : '状态',width : 100,align : 'center',sortable : false,renderer:function(value,metaData,record,rowIndex,columnIndex,str oe,view){var result = '';if(value == 1){result = '<span style="color:green">启用</span>';}else if(value == 0){result = '<span style="color:gray">禁用</span>';}return result;},editor : {xtype : 'view_test_TcodeoneRowStatusView'}}],store : 'test.TcodeoneRowStore'}],initComponent : function(){var listObj = this.items[1];listObj.dockedItems = [{xtype : Ext.widget('zc_grid_Toolbar',{//工具栏params : {initialism : 'test_TcodeoneRow',btnSearchg : true,btnSaveCancel : true}})},{xtype : 'pagingtoolbar', //分页栏dock : 'bottom',displayInfo : true,plugins : Ext.create('Ext.ux.ProgressBarPager'),// 分页进度条pageSize : 25,store : listObj.store}];listObj.plugins = [{//单元格编辑模式ptype : 'cellediting',clicksToEdit : 1,pluginId : 'view_test_TcodeoneRowView_pluginId'}];this.callParent(arguments);}});TcodeoneRowController.js/***@Description代码生成器-单表-行编辑模式控制层*@author张川(cr10210206@)*@date2014-01-1311:22:12*/Ext.define(zc.createController('test.TcodeoneRowController'),{ extend : 'Ext.app.Controller',stores : [zc.storeFactory.getStore({storeName : 'test.TcodeoneRowStore',modelName : zc.modelFactory.getModel('test.TcodeoneRow'),url : zc.bp() + '/test_TcodeoneRow_list.action'}),zc.storeFactory.getStore({storeName : 'test.TcodeoneRowStatusStore',modelName : zc.modelFactory.getModel('bdata.TdtnyCombo'),autoLoad : true,url : zc.getTdtnyValUrl(),params :{initialism : 'status'}})],views : [zc.viewFactory.getCombobox({viewName : 'test.TcodeoneRowStatusView',store : 'test.TcodeoneRowStatusStore'}),'test.TcodeoneRowView'],init : function(){this.control({'view_test_TcodeoneRowView > gridpanel' : {render : function(gridObj,eOpts){var scope = this;setTimeout(function(){//设置延时加载scope.refreshGridObj(gridObj);//加载数据},10);},afterrender : function(gridObj,eOpts){//数据加载完成后保存当前页的数据条数var scope = this;var storeObj = gridObj.getStore();storeObj.on('load',function(){var ct = storeObj.getCount();scope.setStoreCount(ct);});},beforeedit : function(editor, e, eOpts){ //编辑单元格前触发的事件，判断当前用户是否有操作权限return this.getAuth(e);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_refresh]' : { //刷新click : function(btn){this.refreshObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_search]' : {//查询click : function(btn){this.searchObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_add]' : { //新增click : function(btn){this.addObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_update]' : { //修改click : function(btn){this.updateObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_delete]' : {//删除click : function(btn){this.deleteObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_save]' : { //保存click : function(btn){this.saveObj(btn);}},'view_test_TcodeoneRowView > gridpanel button[action=tbar_cancel]' : { //取消click : function(btn){this.cancelObj(btn);}}});},/***刷新**/refreshObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象scope.refreshGridObj(gridObj);//刷新datagrid对象},/***查询**/searchObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象var params = zc.getSearchParams(btn);//查询参数scope.refreshGridObj(gridObj,params);//刷新datagrid对象},/***新增**/addObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象var editor = scope.getPlugin(gridObj);//获取编辑对象var storeObj = gridObj.getStore();//获取Store对象var storeCount = storeObj.getCount();//获取Store个数var record = Ext.create(zc.modelFactory.getModel('test.TcodeoneRow'),{status : 1});storeObj.insert(storeCount,record);editor.startEditByPosition({row : storeCount,column : 1});},/***修改**/updateObj : function(btn){Ext.MessageBox.alert('温馨提示','请点击要修改的单元格!');},/***保存(保存新增和修改)**/saveObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象var storeObj = gridObj.getStore();//获取Store对象var storeCount = storeObj.getCount();//获取当前Store对象的个数var sjStoreCount = scope.getStoreCount();//Store的实际个数var records = null;var url = '';if(storeCount > sjStoreCount){//新增var tbarObj = scope.getTbarBtn(gridObj,'tbar_add');//获取请求地址if(!tbarObj.disabled){records = storeObj.getNewRecords();//获取新增后的数据url = tbarObj.btnurl;}}else {//修改var tbarObj = scope.getTbarBtn(gridObj,'tbar_update');//获取请求地址if(!tbarObj.disabled){records = storeObj.getUpdatedRecords();//获取修改后的数据url = tbarObj.btnurl;}}if(records != null){var result = [];var columns = gridObj.columns;//获取列集合for(var i = 0; i < records.length; i++){var record = records[i];var data = record.data;var t = {};for(var j = 0; j < columns.length; j++){var dataIndex = columns[j].dataIndex;t[dataIndex] = data[dataIndex];}result.push(Ext.JSON.encode(t));}zc.showMsgBox();//显示消息框Ext.Ajax.request({//保存到数据库url : zc.bp() + url,params : {str : result.join(';')},success : function(response, options){zc.hideMsgBox();//隐藏消息框Ext.MessageBox.alert('温馨提示','保存成功');scope.refreshGridObj(gridObj);//刷新gridPanel对象}});}},/***取消**/cancelObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象var storeObj = gridObj.getStore();//获取Store对象var storeCount = storeObj.getCount();//获取当前Store对象的个数var sjStoreCount = scope.getStoreCount();//Store的实际个数if(storeCount > sjStoreCount){//新增var selectedRecords = scope.getSelectionObj(gridObj);//获取选中的行对象数组var addRecords = storeObj.getNewRecords();//获取新增后的行对象数据if(selectedRecords != null && selectedRecords.length > 0){ storeObj.remove(selectedRecords);//删除所有选中的行对象}else{storeObj.remove(addRecords);//删除所有新增的行对象}}},/***删除**/deleteObj : function(btn){var scope = this;var gridObj = scope.getGridObj(btn);//获取datagrid对象var records = scope.getSelectionObj(gridObj);//获取选中行数组if(records == null || records.length == 0){Ext.MessageBox.alert('温馨提示','请勾选要删除的记录!');return;}var ids = [];Ext.each(records, function(record){//循环选中行数组获取每一条记录的唯一标识var id = record.get('id');ids.push(id);});var url = zc.bp() + btn.btnurl;Ext.MessageBox.confirm('温馨提示','确定要删除勾选的记录吗？',function(btn,txt){if(btn == 'yes'){Ext.Ajax.request({url : url,params : {str : ids.join(',')},success : function(response, options){Ext.MessageBox.alert('温馨提示','删除成功');scope.refreshGridObj(gridObj);//刷新gridPanel对象}});}});},/***刷新grid**@param gridObj数据表格对象*@param params请求参数**/refreshGridObj : function(gridObj,params){var scope = this;gridObj.getSelectionModel().deselectAll();//取消所有选中的行对象var storeObj = gridObj.store;//获取Store对象storeObj.currentPage = 1;//设置为当前页storeObj.on('beforeload', function (store, options) {//加载前设置参数if(params != undefined && params != null){storeObj.proxy.extraParams = params;}});storeObj.load();//调用加载方法},/***获取grid对象**@param btn按钮对象**/getGridObj : function(btn){var gridObj = btn.up('gridpanel');//获取datagrid对象return gridObj;},/***获取选中行数组**@param btn按钮对象**/getSelectionObj : function(gridObj){var records = gridObj.getSelectionModel().getSelection();//获取选中行数组return records;},/***获取单元格编辑对象**/getPlugin : function(gridObj){var editorPlugin = gridObj.getPlugin('view_test_TcodeoneRowView_pluginId');return editorPlugin;},/***设置Store个数**/setStoreCount : function(storeCount){var sctid = 'view_test_TcodeoneRowView_tbar_storeCount';var sctObj = Ext.getCmp(sctid);if(sctObj != undefined && sctObj != null){Ext.getCmp(sctid).setValue(storeCount);}},/***获取Store个数**/getStoreCount : function(){returnExt.getCmp('view_test_TcodeoneRowView_tbar_storeCount').getValue();},/***判断当前用户是否有操作权限**/getAuth : function(e){var scope = this;var gridObj = e.grid;var rowIndex = e.rowIdx;//获取当前行的下标var sjStoreCount = scope.getStoreCount();//Store的实际个数if((rowIndex+1) > sjStoreCount){//新增的权限var item = scope.getTbarBtn(gridObj,'tbar_add');return !item.disabled;}else{//修改的权限var item = scope.getTbarBtn(gridObj,'tbar_update');var storeCount = gridObj.getStore().getCount();//获取当前Store对象的个数if(storeCount > sjStoreCount){//新增时取消修改操作return false;}return !item.disabled;}},/***获取工具栏按钮**@param gridObj grid对象*@param actionname工具栏按钮的action属性**/getTbarBtn : function(gridObj,actionname){var dockedItems = gridObj.getDockedItems('toolbar[dock="top"]')[0].items.items;for(var i = 0; i < dockedItems.length; i++){var item = dockedItems[i];if(item.action == actionname){return item;}}}});。

SpreadJS单元格类型的基本应用

SpreadJS单元格类型的基本应用
本文主要介绍了SpreadJS单元格类型的基本应用。

1. Spread.Sheets 提供了很多种单元格类型。

它支持双向绑定（数据发生变化视图也会响应变化）。

每一个单元格类型都提供了两种模式：展示模式和编辑模式。

2. 想要设置单元格类型，首先就要创建一个单元格类型对象，然后使
用 setCellType 方法将单元格类型设置到表单，单元格，列，行上。

例如：
你可以通过将单元格类型绑定到列上这种方式来使用单元格类型。

比如：
当你设置完单元格类型后，可以使用 getCellType 方法获取单元格类型。

如果你想移除单元格类型，你可以将单元格类型的值设置为 null 或者 undefined。

3. Spread.Sheets 在Spread 上提供了一个事件(ButtonClicked) 。

如果你点击了按钮，复选框或者超链接事件就会触发。

例如：
效果展示：。

表格控件SpreadJS在Java 环境下的应用

表格控件SpreadJS在Java 环境下的应用本文主要介绍在Java环境下SpreadJS如何应用。

安装JDK （这里使用jdk 1.7 ）配置环境变量新建环境变量JAVA_HOME：jdk 安装目录，比如C:\Program Files\Java\jdk1.7.0_79 Path：在后面追加%JAVA_HOME%bin; 当在控制台输入java时，系统会在这个路径下寻找。

配置结束在控制台输入java ，javac,java -version 。

如果打印出信息，那么配置成功!因为缓存，所以立即执行并没有成功，打开任务管理器，重启windows 资源管理器即可。

可以在控制台输入set JAVA_HOME ，set PATH 查看环境变量。

安装tomcat下载下载tomcat，解压至C 盘。

如果安装成功。

运行cd C:\apache-tomcat-7.0.72\binstartup.bat在资源管理器中可以双击打开，但推荐使用命令行。

打开浏览器，输入：localhost:8080。

会看到配置单击右上角，Manager App,会看到需要登录，单击取消，跳转到下面页面。

告诉需要配置tomcat。

打开tomcat安装目录下的conf文件夹下的tomcat-users.xml 文件。

在tomcat-users 节点中插入下面节点。

告诉需要配置tomcat。

打开tomcat安装目录下的conf文件夹下的tomcat-users.xml 文件。

在tomcat-users 节点中插入下面节点。

<role rolename="manager-gui"/><user username="tomcat" password="pawwsord" roles="manager-g ui"/>运行startdown.batstartup.bat重启服务。

Spread用法及其注意事项

Spread用法及其注意事项1.获取活动单元格的行索引和列索引introwindex=fpspread1。

活动表。

activerowindex；intcolumnindex=fpspread1。

活动表。

活性柱指数；2.列、单元格锁定这第1页。

活动表。

列[0,4]。

locked=true；//锁定此FPSD1的列范围。

活动表。

列[0]。

locked=true；//锁定单个列也可以直接通过spread designer进行编辑和设置3.下拉框一般只在编辑模式下显示操作方法是选择排列---按钮拖动模式---总是编辑按钮4.spread去掉网格线5.有时该值不能为空。

参数名称：key解决方式就是将数据绑定到spread上，而不是数据表上。

6.设置传播的只读模式frm.fpspread1.activesheet.operationmode=farpoint.win.spread.operationmode.read only;7.列不使用数字表示通常的形式都是写成数字表示的形式fpspread1_uu1。

细胞[i，7]。

文本但是为了防止程序过多的变化，可以写成fpspread1_uu1。

单元格[i，fpspread1\U表1.列[\]。

索引]。

文本但是，前提是将列名设置为大写8.spread中通常数字零值不显示选择sheet并将displayzero设置为false9.通常情况下都要将spread设置成自适应的形式10.排列设置行数、列数、行标题数、列标题数，以及行标题和列标题的显示如果需要对某一列进行列头的编辑，首先选中一列，然后右键选择“headers?”,进入编辑模式，可以进行列头文字的编辑，行、列的合并等操作。

11.通常，扩展模式是全局绑定模式。

在本例中，label是列的名称，tag是与数据库对应的字段。

这样，就不需要设置顺序，程序将根据标签自动绑定12.对表单的操作―对行，列操作（1）添加行fpspread1.sheets[0].rows[0].add();//在第1行之前插入一行fpspread1.sheets[0].rows.add(0,1);fpspread1.sheets[0].addrows(0,1);（2）删除行第1页。