概述
本 Demo 展示了如何使用透视表的 autoFitColumn 方法自动调整列宽。Demo 中创建了一个销售数据透视表，按季度分组展示不同销售人员和汽车的销售额，用户可以通过点击按钮一次性调整所有列的宽度，使其适应内容长度，改善表格的可读性。
实现思路
在 DataSource 工作表中创建数据源表格，包含日期、销售人员、汽车、单价、数量、总计等字段
在 PivotTable 工作表中创建透视表，配置行字段（销售人员、汽车）、列字段（季度）和值字段（总计）
对日期字段按季度进行分组，生成分组后的列字段
为按钮绑定点击事件，调用 pivotTable.autoFitColumn() 方法自动调整所有列宽
代码解析
创建数据源
这段代码在 DataSource 工作表中创建了一个包含 117 行数据的表格，设置了日期格式和货币格式，并通过公式计算总计字段（数量 × 单价）。
初始化透视表
这段代码创建了透视表，使用大纲布局和 medium8 主题。添加了两个行字段（销售人员和汽车）、一个列字段（季度）和一个值字段（总计）。通过 group 方法对日期字段按季度分组，并为数值区域设置货币格式。
绑定自动调整列宽事件
这段代码为按钮绑定点击事件，当用户点击"自动调整列宽"按钮时，调用 autoFitColumn() 方法自动调整透视表中所有列的宽度，使其适应内容长度。
运行效果
页面加载后，PivotTable 工作表中显示按季度分组的销售数据透视表
透视表包含销售人员和汽车两个行字段，季度作为列字段，总计作为值字段
点击右侧面板中的"自动调整列宽"按钮，透视表所有列的宽度会自动调整以适应内容
调整后的列宽确保所有内容完整显示，提升表格可读性
API 参考
pivotTable.autoFitColumn()
自动调整透视表所有列的宽度以适应字段内容。
无参数
返回值：void
pivotTable.add()
向透视表添加字段。
sourceName：源字段名称
displayName：显示名称
area：字段区域（行字段、列字段、值字段等）
subtotal：可选，小计类型
index：可选，字段位置索引
pivotTable.group()
对字段进行分组。
groupInfo.originFieldName：源字段名称
groupInfo.dateGroups：日期分组信息数组，包含 by 属性指定分组类型（如季度、年、月等）
window.onload = function () {
let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2});
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
let tableName = getDataSource(sheet2, pivotSales);
let pivotTable = initPivotTable(sheet1, tableName);
bindEvent(pivotTable, spread);
spread.resumePaint();
}
function getDataSource(sheet, tableSource){
sheet.name("DataSource");
sheet.setRowCount(117);
sheet.setColumnWidth(0, 120);
sheet.getCell(-1, 0).formatter("YYYY-mm-DD");
sheet.getRange(-1,4,0,2).formatter("$ #,##0");
let table = sheet.tables.add('table', 0, 0, 117, 6);
for(let i=2;i<=117;i++)
{
sheet.setFormula(i-1,5,'=D'+i+'*E'+i)
}
table.style(GC.Spread.Sheets.Tables.TableThemes["none"]);
sheet.setArray(0, 0, tableSource);
return table.name();
}
function initPivotTable(sheet, source){
sheet.name("PivotTable");
sheet.setRowCount(1000);
let option = {
bandRows:true,
bandColumns:true
};
let pivotTable = sheet.pivotTables.add("pivotTable", source, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium8,option);
pivotTable.suspendLayout();
pivotTable.add("salesperson", "Salesperson", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("car", "Cars", GC.Spread.Pivot.PivotTableFieldType.rowField);
let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }] };
pivotTable.group(groupInfo);
pivotTable.add("季度 (date)", "季度 (date)",GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("total", "Totals", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
let style = new GC.Spread.Sheets.Style();
style.formatter = "$ #,##0";
pivotTable.setStyle({dataOnly: true}, style);
pivotTable.resumeLayout();
return pivotTable;
}
function bindEvent(pivotTable, spread){
document.getElementById("autofit").addEventListener("click", function(event){
pivotTable.autoFitColumn();
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/pivot-data.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container" id='container'>
<div class="option-group">
<label><b>自动调整列宽:</b></label>
</div>
<hr>
<div class='option-group'>
<input type="button" value="自动调整列宽" class="autofit" id="autofit">
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 300px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 300px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.set-option {
display: block;
margin-top: 20px;
width: 250px;
}
#reportFilterFieldsPerColumn {
width: 28px;
}
.select-option-class{
display: block;
margin-top: 20px;
margin-bottom: 10px
}
.select-option-select{
width: 250px;
display: block;
margin-bottom: 20px;
}
.option-item{
height: 20px;
margin-bottom: 10px;
}
