SpreadJS V15.0新特性揭秘-集算表：列头布局

在集算表中，有时候列数据内容少，但是列头内容很多，这样如果按照列头内容决定列宽，会导致大量区域的浪费，因此在集算表中支持对列头设置布局模式，来解决这些问题。集算表中，列头可以设置的信息如下：

1. interface IColumn {
   
2.     name: string; // the unique name of the column
   
3.     value?: string | IValueFunction; // the value of the column, could be a field name of table from database, or formula which uses the fields names, or a function
   
4.     caption?: string; // the caption of the column, which is the key of row data
   
5.     width?: number; // the width of the column, support number in pixel, or star size
   
6.     style?: StyleOptions; // the whole column style
   
7.     conditionalFormats?: ConditionalFormatOptions[];
   
8.     validator?: ValidatorOptions;
   
9.     isPrimaryKey?: boolean; // mark the column as primary key column
   
10.     readonly?: boolean; // mark the column is readonly
    
11.     required?: boolean; // mark the column is required when insert a new row
    
12.     defaultValue?: any; // provide the default value when insert a new row, could be a const or a formula
    
13.     headerStyle?: HeaderStyleOptions; // the column header style.
    
14.     headerFit?: "normal" | "vertical" | "stack"; // the column header fit mode. defalut is "normal"
    
15. }

复制代码

对于列头设置布局模式的属性为上述IColumn接口中的headerFit属性，该属性为可选参数，默认列头内容排列方式为"normal"，即水平布局方式。接下来会展示三种状态下对应的集算表的展示形式：

1. 默认布局方式。

2. 纵向排列方式。

3. 堆叠排列。

关于列头布局有以下几点策略：
1. 堆叠排列对当前表中最后一列不生效；
2. 列头样式：
        2.1 列头文字默认对齐方式为居中对齐，当设置为堆栈匹配模式时，文字对齐方式会变为左对齐；
        2.2 筛选器按钮会有一定的变化：
        
        2.3 列头右边框如下所示：
        
        2.4 列头单元格背景图片可以显示的区域如下图绿色区域所示：
        
3. 列行为
        3.1 集算表只支持拷贝粘贴值，不会包含列头布局方式；
        3.2 隐藏列后，下一个可见列（在同一视口中（锁定/取消锁定））将替换隐藏列，如果同一视口中没有下一个可见列，则不会替换隐藏列，其余堆栈将重新计算布局；
        3.3 拖动下图中红色边线所在的位置，可以实现对第二列调整宽度。
        

文章最后，提供一个测试代码：

1. var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 0});
   
2. spread.suspendPaint();
   
3. var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
   
4. var dataManager = spread.dataManager();
   
5. var myTable = dataManager.addTable("myTable", {
   
6.      remote: {
   
7.            read: {
   
8.                url: "https://demodata.grapecity.com/northwind/api/v1/Orders"
   
9.           }
   
10.      }
    
11. });
    
12. 
    
13. myTable.fetch().then(function () {
    
14.   view = myTable.addView("myView", [        
    
15.          {value: 'orderId',caption: "OrderId", width: 45, headerFit: "stack"},
    
16.          {value: 'customerId', caption: "CustomerName", width: 50,  headerFit: "stack"},
    
17.          {value: 'employeeId', caption: "EmployeeId", width: 16, headerFit: "stack"},
    
18.          {value: 'orderDate', caption: "orderDate", width: 136},
    
19.          {value: 'requiredDate', caption: "requiredDate", width: 136},
    
20.          {value: 'shippedDate', caption: "ShippedDate", width: 136},
    
21.          {value: 'shipVia', caption: "ShipVia", width: 16, headerFit: "stack"},
    
22.          {value: 'freight', caption: "Freight", width: 45, headerFit: "stack"},
    
23.          {value: 'shipName', caption: "ShipName", width: 100, headerFit: "normal"}
    
24.     ]);
    
25.     sheet.setDataView(view);
    
26. 
    
27. });
    
28. spread.resumePaint();

复制代码

代码运行后的显示效果如下：