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

bakefish

本帖最后由 Winny 于 2022-1-27 10:22 编辑

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

interface IColumn {
name: string; // the unique name of the column
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
caption?: string; // the caption of the column, which is the key of row data
width?: number; // the width of the column, support number in pixel, or star size
style?: StyleOptions; // the whole column style
conditionalFormats?: ConditionalFormatOptions[];
validator?: ValidatorOptions;
isPrimaryKey?: boolean; // mark the column as primary key column
readonly?: boolean; // mark the column is readonly
required?: boolean; // mark the column is required when insert a new row
defaultValue?: any; // provide the default value when insert a new row, could be a const or a formula
headerStyle?: HeaderStyleOptions; // the column header style.
headerFit?: "normal" | "vertical" | "stack"; // the column header fit mode. defalut is "normal"
}

复制代码

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

1. 默认布局方式。
image.png885948181.png

2. 纵向排列方式。
image.png596785277.png

3. 堆叠排列。

关于列头布局有以下几点策略：
1. 堆叠排列对当前表中最后一列不生效；
2. 列头样式：
      2.1 列头文字默认对齐方式为居中对齐，当设置为堆栈匹配模式时，文字对齐方式会变为左对齐；
      2.2 筛选器按钮会有一定的变化：
       image.png740384826.png

2.3 列头右边框如下所示：
image.png923200073.png

2.4 列头单元格背景图片可以显示的区域如下图绿色区域所示：
image.png148463439.png

3. 列行为
      3.1 集算表只支持拷贝粘贴值，不会包含列头布局方式；
      3.2 隐藏列后，下一个可见列（在同一视口中（锁定/取消锁定））将替换隐藏列，如果同一视口中没有下一个可见列，则不会替换隐藏列，其余堆栈将重新计算布局；
      3.3 拖动下图中红色边线所在的位置，可以实现对第二列调整宽度。
       image.png99730834.png

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

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 0});
spread.suspendPaint();
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: "https://demodata.grapecity.com/northwind/api/v1/Orders"
}
}
});
myTable.fetch().then(function () {
view = myTable.addView("myView", [
{value: 'orderId',caption: "OrderId", width: 45, headerFit: "stack"},
{value: 'customerId', caption: "CustomerName", width: 50, headerFit: "stack"},
{value: 'employeeId', caption: "EmployeeId", width: 16, headerFit: "stack"},
{value: 'orderDate', caption: "orderDate", width: 136},
{value: 'requiredDate', caption: "requiredDate", width: 136},
{value: 'shippedDate', caption: "ShippedDate", width: 136},
{value: 'shipVia', caption: "ShipVia", width: 16, headerFit: "stack"},
{value: 'freight', caption: "Freight", width: 45, headerFit: "stack"},
{value: 'shipName', caption: "ShipName", width: 100, headerFit: "normal"}
]);
sheet.setDataView(view);
});
spread.resumePaint();

复制代码

代码运行后的显示效果如下：
image.png302002867.png

		自动登录	找回密码
密码			立即注册

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

评分

0 个回复