FarPointSpread 组件的一些简单操作.docx
- 文档编号:25585253
- 上传时间:2023-06-10
- 格式:DOCX
- 页数:36
- 大小:52.33KB
FarPointSpread 组件的一些简单操作.docx
《FarPointSpread 组件的一些简单操作.docx》由会员分享,可在线阅读,更多相关《FarPointSpread 组件的一些简单操作.docx(36页珍藏版)》请在冰豆网上搜索。
FarPointSpread组件的一些简单操作
Spread的简单操作
桃花心木(原创)
最近公司接了一个小日本的项目---报表输出系统。
由于小日本对Excel用的出神入化,所以想要所有的事情都能通过Excel表现出来。
我们目前做的项目,涉及对报表数据的大量操作并要求可以设置报表的样式,因此小日本想要让我们将报表通过网页形式的Excel表现出来,并可以像微软的Excel一样。
微软的Excel是非常强大的,想要和Excel一模一样是不大可能的,因此只能模拟Excel,实现一些基本的样式设置。
我在网上查了很多资料,但大都是页面加载后样式便已经设定,而我们想要实现的功能是可以在网页上动态的修改报表的样式。
接下来我主要介绍通过一款Spread控件实现模拟网页Excel并可以实现一些简单的常用的样式设置。
设置的样式包括:
设置字体的颜色、大小、粗细、下划线、斜体、居中样式等;设置单元格的背景色;设置边框颜色;拆分合并单元格;增加行和列;边框删除;导入导出Excel;复杂数据输入向导;输入值在固定位置的显示等等。
下面进入正题。
首先,我们需要下载Spread控件(下载测试版即可),并将其安装在本机上。
接下来是将安装好的FpSpread控件添加到VisualStudio2010的WebForm程序。
添加的过程包括下面几步。
你可以打开一个已经存在的网站或者创建一个新的。
第一步运行VisualStudio2010.
第二步创建一个新的网站。
第三步将FpSpread控件添加到工具箱中。
这只需要做一次,以后不必重复添加。
1.如果工具箱不可见,可以从视图菜单选择工具箱。
2.一旦工具箱可见,查看是否有GrapeCity类别(或者在其他的类别下面,如果你已经安装了Spread并将它放在了不同的工具箱图标下)。
3.如果FpSpread控件不在工具箱中,鼠标右击工具箱,选择【选择项】,在弹出对话框中选择【.NETFramework组件】选项卡。
在【.NETFramework组件】选项卡的选择项列表中选中名称为FpSpreadTemplateReplacement、FpSpread、FpChart的选项,点击【确定】按钮,便可以在工具箱中看到一个名为GrapeCitySpread类别的新类别。
这样控件便加载成功了。
4.你可以通过打开一个项目并插入此组件来测试组件是否已经加载成功。
第四步FpSpread组件添加到网站。
1.打开一个项目,在WebForms下的工具箱中选择FpSpread组件。
2.将FpSpread组件添加到WebForms页面中。
此时你便可以看到一个类似Excel的组件出现在你的网页中。
准备工作做完了,接下来便是功能的具体实现了。
上面所提到的功能都是通过ajax或javascript实现的。
下面就各个功能的实现做详细的介绍。
由于时间有限,没有对代码进行详细的分类整理。
第一小节前台代码
由于组件本身没有提供现成的操作按钮,因此我们必须自己添加想要实现功能的触发按钮。
下面以【加粗】、【颜色】功能为例,其他的可以类似添加。
【加粗】按钮:
其中onclick="FontBold()"为js中定义的方法:
functionsetFocus(ss){
if(document.all!
=null){
ss.focus();
}else{
the_fpSpread.SetPageActiveSpread(ss);
the_fpSpread.Focus(ss);
}
}
functionFontBold(){
//FpSpreadText为Spread组件的Id
varss=document.getElementById("FpSpreadText");
//CallBack()为组件提供的方法,调用后台的protectedvoid//FpSpreadText_ButtonCommand(objectsender,FarPoint.Web.Spread.SpreadCommandEventArgse)//函数
ss.CallBack("FontBold");
setFocus(ss);
}
【颜色】选择框:
51px" onchange="SetForeColor(this[this.selectedIndex].text);selectedIndex=0"> #ffffff;BACKGROUND-COLOR: black"value="#000000">Black gray"value="#808080">Gray #A9A9A9"value="#A9A9A9">DarkGray #D3D3D3"value="#D3D3D3">LightGray white"value="#FFFFFF">White blue"value="#0000FF">Blue #ffffff;BACKGROUND-COLOR: navy"value="#000080">Navy #ffffff;BACKGROUND-COLOR: purple"value="#800080">Purple #FF1493"value="#FF1493">DeepPink #ffffff;BACKGROUND-COLOR: #006400"value="#006400">DarkGreen yellow"value="#FFFF00">Yellow red"value="#FF0000">Red #A52A2A"value="#A52A2A">Brown #DEB887"value="#DEB887">BurlyWood 其中onchange="SetForeColor(...)”和前的onclick="FontBold(…)"一样为js中的定义的方法: functionSetForeColor(color){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); //添加"ForeColor."是为了后台确认执行的是何指令 ss.CallBack("ForeColor."+color); setFocus(ss); } 其他的功能按钮可以类似添加,这里不再介绍。 注意: 1.FpSpread控件要放在form内,即代码 2.要在FpSpread组件的属性窗口的事件中给FpSpread绑定FpSpreadText_ButtonCommand()事件 3.js代码 functionsetFocus(ss){ if(document.all! =null){ ss.focus(); }else{ the_fpSpread.SetPageActiveSpread(ss); the_fpSpread.Focus(ss); } } //字体加粗 functionFontBold(){ varss=document.getElementById("FpSpreadText"); ss.CallBack("FontBold"); setFocus(ss); } //字体斜体 functionFontItalic(){ varss=document.getElementById("FpSpreadText"); ss.CallBack("FontItalic"); setFocus(ss); } //字体下划线 functionFontUnderline(){ varss=document.getElementById("FpSpreadText"); ss.CallBack("FontUnderline"); setFocus(ss); } //字体尺寸 functionSetFontSize(size){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("FontSize."+size); setFocus(ss); } //字体颜色 functionSetForeColor(color){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("ForeColor."+color); setFocus(ss); } //单元格背景色 functionSetBackColor(color){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("BackColor."+color); setFocus(ss); } //增加删除行/列 functionaddColumnFunction(celltype){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("addColumn."+celltype); setFocus(ss); } //删除边框 functioncancelBorderFunction(){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("CancelBorder"); setFocus(ss); } //合并、拆分单元格 functionsetCellType(celltype){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("CellType."+celltype); setFocus(ss); } //设置单元格样式: 居中、居左、居右 functionSetCellSite(celltype){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("SetCellSite."+celltype); setFocus(ss); } //设置单元格的边框颜色 functionSetBorderColor(color){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("BorderColor."+color); setFocus(ss); } //导入Excel functionInputExcel(){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("InputExcel"); setFocus(ss); } //导出Excel functionsaveToExcel(){ if(document.all! =null)document.body.focus(); varss=document.getElementById("FpSpreadText"); ss.CallBack("OutputExcel"); setFocus(ss); alert("导Ì? 出? 成¨¦功|"); } 4.网页样式图。 当所有的按钮添加完成后,显示样式具体如下,你可以根据自己的需要加以美化。 第二小节后台代码 usingSystem; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Web; usingSystem.Web.UI; usingSystem.Web.UI.WebControls; usingSystem.Text.RegularExpressions; usingSystem.Drawing; namespaceMvcApplicationSpread.WebForm { publicpartialclassSpread: System.Web.UI.Page { protectedvoidPage_Load(objectsender,EventArgse) { //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.Cells[2,1].Locked=true; //FpSpreadText.ActiveSheetView.Cells[2,1].Value="Thisislocked"; //FpSpreadText.ActiveSheetView.Protect=true; //FpSpreadText.ActiveSheetView.LockBackColor=Color.Brown;//锁定单元格的背景色 //FpSpreadText.ActiveSheetView.LockForeColor=Color.Orange;//锁定单元格字体的颜色 //*******************************************************************************************//*******************************设置字体在垂直方向居中************************************************* //introwsCount=FpSpreadText.ActiveSheetView.Rows.Count;//当前活动视图的函数 //for(inti=0;i //{ //FpSpreadText.ActiveSheetView.Rows[i].VerticalAlign=VerticalAlign.Middle; //} //******************************************************************************************************** } /// ///设置页面属性 /// /// /// protectedvoidFpSpreadText_ButtonCommand(objectsender,FarPoint.Web.Spread.SpreadCommandEventArgse) { #region //获得选择区域的最小行、列索引 varrowindex=FpSpreadText.ActiveSheetView.SelectionModel.AnchorRow; varcolumnindex=FpSpreadText.ActiveSheetView.SelectionModel.AnchorColumn; //获得选择区域的最大行、列索引 varrowFarthestIndex=FpSpreadText.ActiveSheetView.SelectionModel.LeadRow; varcolumnFarthestIndex=FpSpreadText.ActiveSheetView.SelectionModel.LeadColumn; //设置字体大小指令的标志 RegexreFontSize=newRegex("FontSize."); MatchfontSizeMatch=reFontSize.Match(e.CommandName);//e.CommandName为前台CallBack传回的参数 //设置字体颜色指令的标志 RegexreFontColor=newRegex("ForeColor."); MatchfontColorMatch=reFontColor.Match(e.CommandName); //设置单元格背景色指令的标志 RegexreBackColor=newRegex("BackColor."); MatchcellBackColor=reBackColor.Match(e.CommandName); //设置边框颜色指令的标志 RegexreBorderColor=newRegex("BorderColor."); MatchcellBorderColor=reBorderColor.Match(e.CommandName); //合并单元格指令的标志 RegexreCellCombin=newRegex("CellType."); MatchcellType=reCellCombin.Match(e.CommandName); //增加行、列指令的标志 RegexreRowColumn=newRegex("addColumn."); MatchaddRowColumn=reRowColumn.Match(e.CommandName); //设置公式指令的标志 RegexreFormula=newRegex("formula.="); MatchsetFormula=reFormula.Match(e.CommandName); //设置单元格对齐方式的指令 RegexreCellSite=newRegex("SetCellSite."); MatchcellSite=reCellSite.Match(e.CommandName); #endregion #regio
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FarPoint Spread 组件的一些简单操作 组件 一些 简单 操作