1. 首頁 > 生活百科 > >

基于純前端類Excel表格控件實現在線損益表應用( 二 )

生活百科


我們將使用計算字段功能在數據透視表中添加差異和差異百分比 。

  1. 單擊數據透視表分析 。
  2. 字段、項目和集合 → 計算字段 。
  3. 設置計算字段的名稱差異 。
  4. 要在公式中添加字段，請選擇該字段，然后單擊“插入字段” 。
  5. 單擊添加按鈕 。

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
或用JavaScript實現：
pivotTable.addCalcField('diff', '=Actual-Budget');pivotTable.add("diff", "Difference", GC.Spread.Pivot.PivotTableFieldType.valueField); pivotTable.addCalcField('diff%', '=Actual/Budget-1');pivotTable.add("diff%", "Difference %", GC.Spread.Pivot.PivotTableFieldType.valueField);我們添加的兩個字段是差異和差異 % 。使用的公式如下：
基于純前端類Excel表格控件實現在線損益表應用

文章插圖
添加切片器切片器作為用于過濾數據透視表的新功能 。使用此功能按地區和財政年度過濾數據 。
如果使用的是設計器，執行以下操作：
  1. 單擊數據透視表分析
  2. 插入切片器
  3. 選擇地區和財政年度

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
或使用JavaScript實現：
var regionSlicer = sheet.slicers.add("Region", pivotTable.name(), "Region", GC.Spread.Sheets.Slicers.SlicerStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);var yearSlicer = sheet.slicers.add("Financial Year", pivotTable.name(), "Financial Year", GC.Spread.Sheets.Slicers.SlicerStyles.dark4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);進行一些外觀調整為了使數據透視表更易于閱讀 ， 這里進行了一些調整，例如：
折疊計算項這將隱藏匯總的帳戶以顯示計算項目的值 。
基于純前端類Excel表格控件實現在線損益表應用

文章插圖
在組頂部顯示小計
  1. 轉到設計選項卡
  2. 單擊小計
  3. 選擇“在組頂部顯示所有小計”

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
在每個項目后插入空行
  1. 轉到設計選項卡
  2. 單擊空白行
  3. 選擇“在每個項目后插入空白行”

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
隱藏按鈕和字段標題
  1. 轉到數據透視表分析選項卡
  2. 單擊按鈕和字段標題

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
更改樞軸布局
  1. 轉到設計選項卡
  2. 單擊報告布局
  3. 選擇“以大綱形式顯示”

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
上面提到的修改可以通過代碼輕松更改 。SpreadJS 提供了許多不同的選項來根據應用程序的需要自定義數據透視表的外觀和功能 。我們可以更改數據透視表選項和布局 ， 如下所示：
let option = pivotTable.options;option = {allowMultipleFiltersPerField: true,insertBlankLineAfterEachItem: true, // Insert Blank Line after Each Item *grandTotalPosition: GC.Spread.Pivot.GrandTotalPosition.row,subtotalsPosition: GC.Spread.Pivot.SubTotalsPosition.top, // Show SubTotals at the Top of the Group *displayFieldsInPageFilterArea: GC.Spread.Pivot.DisplayFields.downThenOver,reportFilterFieldsPerColumn: 1,bandRows:true,bandColumns: true,showRowHeader: true,showColumnHeader: true,showDrill: true, // Collapse Buttons *showMissing: true,showToolTip: true,missingCaption: 'something',fillDownLabels: false,repeatAllItemLabels: false,rowLabelIndent: 4,mergeItem: false,showHeaders: true // Collapse Field Headers *};pivotTable.layoutType(1); // Change the Pivot Layout to Outline Form *條件和自定義格式接下來，將格式化數據透視表字段 。這里可以使用如下所示的數據透視面板設置格式：
  1. 轉到值 - > 值字段設置
  2. 單擊數字格式
  3. 設置格式 。在我們的例子中：$#,##0
  4. 確認

基于純前端類Excel表格控件實現在線損益表應用

文章插圖
如果想通過代碼執行此操作，請參見下文：
//identify the areavar areaActual= {dataOnly: true,references: [{fieldName: "Actual",items: [fieldName]}]};var style = new GC.Spread.Sheets.Style();style.formatter = "$#,##0";//set style to the areapivotTable.setStyle(areaActual, style);我們可以對其他字段使用相同的邏輯 。使用下表對應的格式：
基于純前端類Excel表格控件實現在線損益表應用

文章插圖

推薦閱讀