FarPoint Spread 組件的一些簡單操作.docx

Spread 的簡單操作桃花心木（原創(chuàng)）最近公司接了一個小日本的項目-報表輸出系統(tǒng)。由于小日本對Excel用的出神入化，所以想要所有的事情都能通過Excel表現(xiàn)出來。我們目前做的項目，涉及對報表數(shù)據(jù)的大量操作并要求可以設(shè)置報表的樣式，因此小日本想要讓我們將報表通過網(wǎng)頁形式的Excel表現(xiàn)出來，并可以像微軟的Excel一樣。微軟的Excel是非常強大的，想要和Excel一模一樣是不大可能的，因此只能模擬Excel，實現(xiàn)一些基本的樣式設(shè)置。我在網(wǎng)上查了很多資料，但大都是頁面加載后樣式便已經(jīng)設(shè)定，而我們想要實現(xiàn)的功能是可以在網(wǎng)頁上動態(tài)的修改報表的樣式。接下來我主要介紹通過一款Spread控件實現(xiàn)模擬網(wǎng)頁Excel并可以實現(xiàn)一些簡單的常用的樣式設(shè)置。設(shè)置的樣式包括：設(shè)置字體的顏色、大小、粗細、下劃線、斜體、居中樣式等；設(shè)置單元格的背景色；設(shè)置邊框顏色；拆分合并單元格；增加行和列；邊框刪除；導(dǎo)入導(dǎo)出Excel；復(fù)雜數(shù)據(jù)輸入向?qū)В惠斎胫翟诠潭ㄎ恢玫娘@示等等。下面進入正題。首先，我們需要下載Spread控件（下載測試版即可），并將其安裝在本機上。接下來是將安裝好的FpSpread控件添加到Visual Studio 2010的Web Form程序。添加的過程包括下面幾步。你可以打開一個已經(jīng)存在的網(wǎng)站或者創(chuàng)建一個新的。第一步 運行Visual Studio 2010.第二步 創(chuàng)建一個新的網(wǎng)站。第三步 將FpSpread控件添加到工具箱中。這只需要做一次，以后不必重復(fù)添加。1. 如果工具箱不可見，可以從視圖菜單選擇工具箱。2. 一旦工具箱可見，查看是否有GrapeCity類別（或者在其他的類別下面，如果你已經(jīng)安裝了Spread 并將它放在了不同的工具箱圖標(biāo)下）。3. 如果FpSpread控件不在工具箱中，鼠標(biāo)右擊工具箱，選擇【選擇項】，在彈出對話框中選擇 【.NET Framework 組件】選項卡。在【.NET Framework 組件】選項卡的選擇項列表中選中名稱為FpSpreadTemplateReplacement、FpSpread、FpChart的選項，點擊【確定】按鈕，便可以在工具箱中看到一個名為GrapeCity Spread類別的新類別。這樣控件便加載成功了。4. 你可以通過打開一個項目并插入此組件來測試組件是否已經(jīng)加載成功。第四步 FpSpread組件添加到網(wǎng)站。1. 打開一個項目，在Web Forms下的工具箱中選擇FpSpread組件。2. 將FpSpread組件添加到Web Forms 頁面中。此時你便可以看到一個類似Excel的組件出現(xiàn)在你的網(wǎng)頁中。 準(zhǔn)備工作做完了，接下來便是功能的具體實現(xiàn)了。上面所提到的功能都是通過ajax或javascript實現(xiàn)的。下面就各個功能的實現(xiàn)做詳細的介紹。由于時間有限，沒有對代碼進行詳細的分類整理。第一小節(jié) 前臺代碼由于組件本身沒有提供現(xiàn)成的操作按鈕，因此我們必須自己添加想要實現(xiàn)功能的觸發(fā)按鈕。下面以【加粗】、【顏色】功能為例，其他的可以類似添加?！炯哟帧堪粹o：其中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（）為組件提供的方法，調(diào)用后臺的protected void /FpSpreadText_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) /函數(shù) 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.是為了后臺確認(rèn)執(zhí)行的是何指令 ss.CallBack(ForeColor. + color); setFocus(ss); 其他的功能按鈕可以類似添加，這里不再介紹。注意：1.FpSpread控件要放在form內(nèi)，即代碼之間。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); /設(shè)置單元格樣式：居中、居左、居右 function SetCellSite(celltype) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(SetCellSite. + celltype); setFocus(ss); /設(shè)置單元格的邊框顏色 function SetBorderColor(color) if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(BorderColor. + color); setFocus(ss); /導(dǎo)入Excel function InputExcel() if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(InputExcel); setFocus(ss); /導(dǎo)出Excel function saveToExcel() if (document.all != null) document.body.focus(); var ss = document.getElementById(FpSpreadText); ss.CallBack(OutputExcel); setFocus(ss); alert(導(dǎo)?出?成功|); 4.網(wǎng)頁樣式圖。當(dāng)所有的按鈕添加完成后，顯示樣式具體如下，你可以根據(jù)自己的需要加以美化。第二小節(jié) 后臺代碼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; /凍結(jié)兩列，也可以代碼實現(xiàn)動態(tài)選擇凍結(jié)的列數(shù) /FpSpreadText.ActiveSheetView.FrozenRowCount = 2; /凍結(jié)兩行 /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; /選中單元格顯示的背景色 /*設(shè)置某單元格為鎖定狀態(tài)* /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; /鎖定單元格字體的顏色 /* /*設(shè)置字體在垂直方向居中* /int rowsCount = FpSpreadText.ActiveSheetView.Rows.Count; /當(dāng)前活動視圖的函數(shù) /for (int i = 0; i rowsCount; i+) / / FpSpreadText.ActiveSheetView.Rowsi.VerticalAlign = VerticalAlign.Middle; / /* / / 設(shè)置頁面屬性 / / / protected void FpSpreadText_ButtonCommand(object sender, FarPoint.Web.Spread.SpreadCommandEventArgs e) #region /獲得選擇區(qū)域的最小行、列索引 var rowindex = FpSpreadText.ActiveSheetView.SelectionModel.AnchorRow; var columnindex = FpSpreadText.ActiveSheetView.SelectionModel.AnchorColumn; /獲得選擇區(qū)域的最大行、列索引 var rowFarthestIndex = FpSpreadText.ActiveSheetView.SelectionModel.LeadRow; var columnFarthestIndex = FpSpreadText.ActiveSheetView.SelectionModel.LeadColumn; /設(shè)置字體大小指令的標(biāo)志 Regex reFontSize = new Regex(FontSize.); Match fontSizeMatch = reFontSize.Match(e.CommandName); /e.CommandName為前臺CallBack傳回的參數(shù) /設(shè)置字體顏色指令的標(biāo)志 Regex reFontColor = new Regex(ForeColor.); Match fontColorMatch = reFontColor.Match(e.CommandName); /設(shè)置單元格背景色指令的標(biāo)志 Regex reBackColor = new Regex(BackColor.); Match cellBackColor = reBackColor.Match(e.CommandName); /設(shè)置邊框顏色指令的標(biāo)志 Regex reBorderColor = new Regex(BorderColor.); Match cellBorderColor = reBorderColor.Match(e.CommandName); /合并單元格指令的標(biāo)志 Regex reCellCombin = new Regex(CellType.); Match cellType = reCellCombin.Match(e.CommandName); /增加行、列指令的標(biāo)志 Regex reRowColumn = new Regex(addColumn.); Match addRowColumn = reRowColumn.Match(e.CommandName); /設(shè)置公式指令的標(biāo)志 Regex reFormula = new Regex(formula.=); Match setFormula = reFormula.Match(e.CommandName); /設(shè)置單元格對齊方式的指令 Regex reCellSite = new Regex(SetCellSite.); Match cellSite = reCellSite.Match(e.CommandName); #endregion #region 給指定的單元格設(shè)置公式 if (setFormula.Success) /給指定的單元格設(shè)置公式 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 導(dǎo)入Excel if (e.CommandName = InputExcel) /導(dǎo)入Excel / F:Test1.xlsx為絕對路徑 FpSpreadText.OpenExcel(F:Test1.xlsx); FpSpreadText.ActiveSheetView.PageSize = FpSpreadText.Rows.Count+10; /由于spread的邊框粗細中的solid2對應(yīng)Excel中的hairline，故需導(dǎo)入后，將Spread的邊框尺寸設(shè)置為1，否則導(dǎo)入后邊框會變成粗線。但是你如果沒有執(zhí)行添加區(qū)域單元格邊框的那一步驟的話就沒有必要執(zhí)行這一步了，導(dǎo)出時同理。 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 導(dǎo)出Excel if (e.CommandName = OutputExcel) /導(dǎo)出Excel /由于spread的邊框粗細中的solid2對應(yīng)Excel中的hairline，故需導(dǎo)處之前，需將Spread的邊框尺寸設(shè)置為2，否則導(dǎo)入后邊框會變成虛線 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; /導(dǎo)出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邊框恢復(fù)正常 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 實現(xiàn)字體粗體 if (e.CommandName = FontBold) /實現(xiàn)選中區(qū)域的粗體，以首個字體的粗線為準(zhǔn)，首個字體為粗體，則變?yōu)檎ｓw。 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 實現(xiàn)字體斜體，實現(xiàn)方法有粗體類似 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 實現(xiàn)字體下劃線，實現(xiàn)方法有粗體類似 if (e.CommandName = FontUnderline) if (this.FpSpreadText.Cellsrowindex, columnindex.Font.Underline = true) for (int i = rowindex; i = rowFarthestI