FarPoint Spread 组件的一些简单操作.docx

Spread 的简单操作桃花心木（原创）最近公司接了一个小日本的项目-报表输出系统。由于小日本对Excel用的出神入化，所以想要所有的事情都能通过Excel表现出来。我们目前做的项目，涉及对报表数据的大量操作并要求可以设置报表的样式，因此小日本想要让我们将报表通过网页形式的Excel表现出来，并可以像微软的Excel一样。微软的Excel是非常强大的，想要和Excel一模一样是不大可能的，因此只能模拟Excel，实现一些基本的样式设置。我在网上查了很多资料，但大都是页面加载后样式便已经设定，而我们想要实现的功能是可以在网页上动态的修改报表的样式。接下来我主要介绍通过一款Spread控件实现模拟网页Excel并可以实现一些简单的常用的样式设置。设置的样式包括：设置字体的颜色、大小、粗细、下划线、斜体、居中样式等；设置单元格的背景色；设置边框颜色；拆分合并单元格；增加行和列；边框删除；导入导出Excel；复杂数据输入向导；输入值在固定位置的显示等等。下面进入正题。首先，我们需要下载Spread控件（下载测试版即可），并将其安装在本机上。接下来是将安装好的FpSpread控件添加到Visual Studio 2010的Web Form程序。添加的过程包括下面几步。你可以打开一个已经存在的网站或者创建一个新的。第一步 运行Visual Studio 2010.第二步 创建一个新的网站。第三步 将FpSpread控件添加到工具箱中。这只需要做一次，以后不必重复添加。1. 如果工具箱不可见，可以从视图菜单选择工具箱。2. 一旦工具箱可见，查看是否有GrapeCity类别（或者在其他的类别下面，如果你已经安装了Spread 并将它放在了不同的工具箱图标下）。3. 如果FpSpread控件不在工具箱中，鼠标右击工具箱，选择【选择项】，在弹出对话框中选择 【.NET Framework 组件】选项卡。在【.NET Framework 组件】选项卡的选择项列表中选中名称为FpSpreadTemplateReplacement、FpSpread、FpChart的选项，点击【确定】按钮，便可以在工具箱中看到一个名为GrapeCity Spread类别的新类别。这样控件便加载成功了。4. 你可以通过打开一个项目并插入此组件来测试组件是否已经加载成功。第四步 FpSpread组件添加到网站。1. 打开一个项目，在Web Forms下的工具箱中选择FpSpread组件。2. 将FpSpread组件添加到Web Forms 页面中。此时你便可以看到一个类似Excel的组件出现在你的网页中。 准备工作做完了，接下来便是功能的具体实现了。上面所提到的功能都是通过ajax或javascript实现的。下面就各个功能的实现做详细的介绍。由于时间有限，没有对代码进行详细的分类整理。第一小节 前台代码由于组件本身没有提供现成的操作按钮，因此我们必须自己添加想要实现功能的触发按钮。下面以【加粗】、【颜色】功能为例，其他的可以类似添加。【加粗】按钮：其中onclick=FontBold()为js中定义的方法： function setFocus(ss) if (document.all != null) ss.focus(); else the_fpSpread.SetPageActiveSpread(ss); the_fpSpread.Focus(ss); function FontBold() / FpSpreadText为Spread组件的Id var ss = document.getElementById(FpSpreadText); /CallBack（）为组件提供的方法，调用后台的protected void /FpSpreadText_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) /函数 ss.CallBack(FontBold); setFocus(ss); 【颜色】选择框： Color BlackGrayDarkGrayLightGrayWhiteBlueNavyPurpleDeepPinkDarkGreenYellowRedBrownBurlyWood 其中onchange=SetForeColor(.)”和前的onclick=FontBold()一样为js中的定义的方法：function SetForeColor(color) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); /添加ForeColor.是为了后台确认执行的是何指令 ss.CallBack(ForeColor. + color); setFocus(ss); 其他的功能按钮可以类似添加，这里不再介绍。注意：1.FpSpread控件要放在form内，即代码之间。2.要在FpSpread组件的属性窗口的事件中给FpSpread绑定FpSpreadText_ButtonCommand（）事件3.js代码 function setFocus(ss) if (document.all != null) ss.focus(); else the_fpSpread.SetPageActiveSpread(ss); the_fpSpread.Focus(ss); /字体加粗 function FontBold() var ss = document.getElementById(FpSpreadText); ss.CallBack(FontBold); setFocus(ss); /字体斜体 function FontItalic() var ss = document.getElementById(FpSpreadText); ss.CallBack(FontItalic); setFocus(ss); /字体下划线 function FontUnderline() var ss = document.getElementById(FpSpreadText); ss.CallBack(FontUnderline); setFocus(ss); /字体尺寸 function SetFontSize(size) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(FontSize. + size); setFocus(ss); /字体颜色 function SetForeColor(color) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(ForeColor. + color); setFocus(ss); /单元格背景色 function SetBackColor(color) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(BackColor. + color); setFocus(ss); /增加删除行/列 function addColumnFunction(celltype) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(addColumn.+celltype); setFocus(ss); /删除边框 function cancelBorderFunction() if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(CancelBorder); setFocus(ss); /合并、拆分单元格 function setCellType(celltype) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(CellType. + celltype); setFocus(ss); /设置单元格样式：居中、居左、居右 function SetCellSite(celltype) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(SetCellSite. + celltype); setFocus(ss); /设置单元格的边框颜色 function SetBorderColor(color) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(BorderColor. + color); setFocus(ss); /导入Excel function InputExcel() if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(InputExcel); setFocus(ss); /导出Excel function saveToExcel() if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(OutputExcel); setFocus(ss); alert(导?出?成功|); 4.网页样式图。当所有的按钮添加完成后，显示样式具体如下，你可以根据自己的需要加以美化。第二小节 后台代码using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Text.RegularExpressions;using System.Drawing;namespace MvcApplicationSpread.WebForm public partial class Spread : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) /this.FpSpreadText.Attributes.Add(KeyDown, Enter();/挂起双击事件 /FpSpreadText.ActiveSheetView.FrozenColumnCount =20; /冻结两列，也可以代码实现动态选择冻结的列数 /FpSpreadText.ActiveSheetView.FrozenRowCount = 2; /冻结两行 /FpSpreadText.ActiveSheetView.SelectionPolicy = FarPoint.Web.Spread.Model.SelectionPolicy.Single;/只能选中一个单元格 /FpSpreadText.ActiveSheetView.SelectionPolicy = FarPoint.Web.Spread.Model.SelectionPolicy.Range; /可以任意选择单元格 /FpSpreadText.ActiveSheetView.SelectionPolicy = FarPoint.Web.Spread.Model.SelectionPolicy.MultiRange; /可以任意选择单元格 /FpSpreadText.ActiveSheetView.SelectionBackColor = Color.LightPink; /选中单元格显示的背景色 /*设置某单元格为锁定状态* /FpSpreadText.ActiveSheetView.Cells2, 1.Locked = true; /FpSpreadText.ActiveSheetView.Cells2, 1.Value = This is locked; /FpSpreadText.ActiveSheetView.Protect = true; /FpSpreadText.ActiveSheetView.LockBackColor = Color.Brown; /锁定单元格的背景色 /FpSpreadText.ActiveSheetView.LockForeColor = Color.Orange; /锁定单元格字体的颜色 /* /*设置字体在垂直方向居中* /int rowsCount = FpSpreadText.ActiveSheetView.Rows.Count; /当前活动视图的函数 /for (int i = 0; i rowsCount; i+) / / FpSpreadText.ActiveSheetView.Rowsi.VerticalAlign = VerticalAlign.Middle; / /* / / 设置页面属性 / / / protected void FpSpreadText_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) #region /获得选择区域的最小行、列索引 var rowindex = FpSpreadText.ActiveSheetView.SelectionModel.AnchorRow; var columnindex = FpSpreadText.ActiveSheetView.SelectionModel.AnchorColumn; /获得选择区域的最大行、列索引 var rowFarthestIndex = FpSpreadText.ActiveSheetView.SelectionModel.LeadRow; var columnFarthestIndex = FpSpreadText.ActiveSheetView.SelectionModel.LeadColumn; /设置字体大小指令的标志 Regex reFontSize = new Regex(FontSize.); Match fontSizeMatch = reFontSize.Match(e.CommandName); /e.CommandName为前台CallBack传回的参数 /设置字体颜色指令的标志 Regex reFontColor = new Regex(ForeColor.); Match fontColorMatch = reFontColor.Match(e.CommandName); /设置单元格背景色指令的标志 Regex reBackColor = new Regex(BackColor.); Match cellBackColor = reBackColor.Match(e.CommandName); /设置边框颜色指令的标志 Regex reBorderColor = new Regex(BorderColor.); Match cellBorderColor = reBorderColor.Match(e.CommandName); /合并单元格指令的标志 Regex reCellCombin = new Regex(CellType.); Match cellType = reCellCombin.Match(e.CommandName); /增加行、列指令的标志 Regex reRowColumn = new Regex(addColumn.); Match addRowColumn = reRowColumn.Match(e.CommandName); /设置公式指令的标志 Regex reFormula = new Regex(formula.=); Match setFormula = reFormula.Match(e.CommandName); /设置单元格对齐方式的指令 Regex reCellSite = new Regex(SetCellSite.); Match cellSite = reCellSite.Match(e.CommandName); #endregion #region 给指定的单元格设置公式 if (setFormula.Success) /给指定的单元格设置公式 string strForm = e.CommandName.Substring(8); if (strForm.Length 1) FarPoint.Web.Spread.Model.DefaultSheetDataModel dm = new FarPoint.Web.Spread.Model.DefaultSheetDataModel(); FpSpreadText.ActiveSheetView.DataModel = dm; dm.SetFormula(rowindex, columnindex, strForm); #endregion #region 导入Excel if (e.CommandName = InputExcel) /导入Excel / F:Test1.xlsx为绝对路径 FpSpreadText.OpenExcel(F:Test1.xlsx); FpSpreadText.ActiveSheetView.PageSize = FpSpreadText.Rows.Count+10; /由于spread的边框粗细中的solid2对应Excel中的hairline，故需导入后，将Spread的边框尺寸设置为1，否则导入后边框会变成粗线。但是你如果没有执行添加区域单元格边框的那一步骤的话就没有必要执行这一步了，导出时同理。 int rowCount = FpSpreadText.Rows.Count; int colCount = FpSpreadText.Columns.Count; for (int i = 0; i rowCount; i+) for (int j = 0; j colCount; j+) FarPoint.Web.Spread.Cell cOneCellBack; cOneCellBack = this.FpSpreadText.ActiveSheetView.Cellsi, j; cOneCellBack.Border.BorderSizeTop = 1; cOneCellBack.Border.BorderSizeBottom = 1; cOneCellBack.Border.BorderSizeLeft = 1; cOneCellBack.Border.BorderSizeRight = 1; #endregion #region 导出Excel if (e.CommandName = OutputExcel) /导出Excel /由于spread的边框粗细中的solid2对应Excel中的hairline，故需导处之前，需将Spread的边框尺寸设置为2，否则导入后边框会变成虚线 int rowCount = FpSpreadText.Rows.Count; int colCount = FpSpreadText.Columns.Count; for (int i = 0; i rowCount; i+) for (int j = 0; j colCount; j+) FarPoint.Web.Spread.Cell cOneCell; cOneCell = FpSpreadText.ActiveSheetView.Cellsi, j; cOneCell.Border.BorderSizeTop = 2; cOneCell.Border.BorderSizeBottom = 2; cOneCell.Border.BorderSizeLeft = 2; cOneCell.Border.BorderSizeRight = 2; /导出Excel FarPoint.Web.Spread.SheetView sv = FpSpreadText.ActiveSheetView; sv.GridLines = GridLines.Both; sv.Protect = false; this.FpSpreadText.SaveExcel(F:Test1.xlsx, FarPoint.Excel.ExcelSaveFlags.UseOOXMLFormat); /将spread边框恢复正常 for (int i = 0; i rowCount; i+) for (int j = 0; j colCount; j+) FarPoint.Web.Spread.Cell cOneCellBack; cOneCellBack = FpSpreadText.ActiveSheetView.Cellsi, j; cOneCellBack.Border.BorderSizeTop = 1; cOneCellBack.Border.BorderSizeBottom = 1; cOneCellBack.Border.BorderSizeLeft = 1; cOneCellBack.Border.BorderSizeRight = 1; #endregion #region 实现字体粗体 if (e.CommandName = FontBold) /实现选中区域的粗体，以首个字体的粗线为准，首个字体为粗体，则变为正常体。 if (this.FpSpreadText.Cellsrowindex, columnindex.Font.Bold = true) for (int i = rowindex; i = rowFarthestIndex; i+) for (int j = columnindex; j = columnFarthestIndex; j+) this.FpSpreadText.Cellsi, j.Font.Bold = false; else for (int i = rowindex; i = rowFarthestIndex; i+) for (int j = columnindex; j = columnFarthestIndex; j+) this.FpSpreadText.Cellsi, j.Font.Bold = true; #endregion #region 实现字体斜体，实现方法有粗体类似 if (e.CommandName = FontItalic) if (this.FpSpreadText.Cellsrowindex, columnindex.Font.Italic = true) for (int i = rowindex; i = rowFarthestIndex; i+) for (int j = columnindex; j = columnFarthestIndex; j+) this.FpSpreadText.Cellsi, j.Font.Italic = false; else for (int i = rowindex; i = rowFarthestIndex; i+) for (int j = columnindex; j = columnFarthestIndex; j+) this.FpSpreadText.Cellsi, j.Font.Italic = true; #endregion #region 实现字体下划线，实现方法有粗体类似 if (e.CommandName = FontUnderline) if (this.FpSpreadText.Cellsrowindex, columnindex.Font.Underline = true) for (int i = rowindex; i = rowFarthestI