[{"id":"b66f8b1e-cc14-4e89-9679-abd5687d283d","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"569bb90a-ea68-46c6-96f1-ab151c120714","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5eb52f08-2d1a-4362-9ffc-4871bdc10f3f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"341dd607-b97d-4d70-bde2-53acda6b6c95","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"05349273-414f-4208-9ea2-c4fc8f4ea2cb","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86089f76-b778-4d52-821e-6f27de3df613","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b81e4fd6-1fc5-43a0-a258-b6e16a5cbec6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8aa8ce31-43e4-438e-951f-241608435260","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"37343f41-6ec2-4c7e-b21d-2cc18d5ce1e0","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5915e52f-64f8-4146-b8bd-81bead6324a3","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"836ba889-af9e-460d-a4cc-c24d922795f2","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4ae14b06-bb68-4394-a210-a46b8f028346","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d8f42066-e9dc-4411-bdcf-43b1a203370c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ef86f16-b1a0-49f7-9592-612b9be02b25","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b29c7775-a9a4-451e-a1b5-01d19ed5ca5e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"e56f3989-8f81-46af-90fa-a4813eeb976f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2526c963-f170-45a8-923e-91b0712a9810","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24575cf0-501a-44f9-8426-c40f8f4b5552","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1a6f8d7f-acd6-42be-8c4f-f464c6218381","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"82b176fd-5cab-498c-909e-8fa7d29c38d8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1708b3a9-4f37-44a8-8f0e-f9a2d2e5d940","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c9ac246e-29fb-4bc4-8231-8439795bb590","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"94f2a5c3-2539-436a-af75-23fbbd1a3957","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d99594f4-2d40-4df4-9419-ba2ca6aa3f7f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"fd66e72d-0f10-4f57-9807-6db26290ab2e","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8f344863-503d-4bc3-a594-3815e7d55f5c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"9be82601-de9d-4c18-948a-23ab6f4dd431","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6495f3c0-b463-47e0-b08a-ca949672211e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b4bede08-3f08-4839-ba4a-abc7ac195bde","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4afcdfc0-3ff5-4f2b-a223-f8fc042a5bbe","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"422062c4-fa40-4771-a86f-008efe6d86e5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d87e8013-86a7-4840-8d25-6f62e14eb4ac","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a6acedfd-4043-4c64-a5d1-aec3326df9e7","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dbdc0b24-06c4-48b9-8d6c-7455119dc773","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a3856849-954a-4cfc-96a6-382e530d3638","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a39306b-ffa5-433d-80a3-28e41f929b72","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
        
(Showing Draft Content)

动态列大小

SpreadJS支持动态列大小调整(也称为星形大小调整和比例大小调整)。

什么是动态大小调整?

动态列大小调整用于配置列的宽度和行的高度,以使视口完全按照用户指定的加权比例(以*符号表示)填充。

这种大小调整可以与数字结合使用以定义加权比例,其中:

  • 加权因子使用*(星号)或n *字符(n可以是任何整数值(例如2 *,3 *等)或非整数值(例如0.5 *或1.5 *等)表示。 )。
  • 可用大小=视口大小-可见的固定大小。
  • 可用大小根据用户定义的加权因子分配到可见行或列。
  • 总列宽=视口宽度。

使用场景

动态大小调整非常有用,特别是当用户需要按比例扩大多列以便分析报告或处理大型表单。

例如 - 下图描述了一个表单,其中动态列的大小分别以1.5 *,1.5 *,的比例应用于A,B,D和E列。

在上面的示例中,星号为“ 1.5 *”的列A和B填充的是视口中标准“ *”大小的列的1.5倍。

支持的用户操作

动态大小调整(或比例大小调整)确保每当变更视口大小或用户添加,删除或调整任何行或列的大小时,表单中的列和行就完全填充视口。

用户可以使用 setColumnWidth()setRowHeight() 方法在表单中配置动态列大小。 应用动态列大小后,当用户在worskheet上执行以下操作时,将自动调整列和行的大小(在其上应用星型调整大小)以填充视口:

  • 用户变更视图的大小。
  • 用户添加,删除或调整表单中的任何列或行的大小。
  • 用户变更行数或列数。
  • 用户隐藏或取消隐藏行或列。
  • 用户对行和列进行分组或取消分组。
  • 用户将筛选应用于行和列。
  • 用户展开或折叠表单中的大纲列。

导入和导出JSON文件时也支持动态列大小调整。

动态大小调整规则

在表单中使用动态大小功能时,必须牢记以下规则:

  • 在表单上,行和列都可以设置为星形。
  • 当用户尝试调整星号大小的行或列的大小,或调用 autoFitColumn() / autoFitRow() 方法, 那么操作的行或列的大小将被覆盖为具有实际大小的固定数字。 如果您正在使用拆分调整大小模式(仅适用于nextTo模式),则它将会将操作的行或列以及下一个行或列的大小覆盖为固定数字。
  • 如果最小的星形 <1 (小于 1) 或者可用大小 <1 (小于 1), 那么星号将保持旧尺寸,因为它将停止计算动态尺寸。
  • 如果用户将星号大小的行或列设置为“隐藏”或“ 0 *”,方法 getColumnWidth()getRowHeight() 将返回0。
  • 如果用户将星号大小的行或列设置为无效字符串(如“ abc”),它将被视为默认值。
  • 用户缩放表单后,固定的行或列将缩放,并且星形调整将拉伸以填充视图。
  • 当星形行或列变更时,表单中的任何绑定对象(如形状,图表,注释和浮动对象)也将跟随变更。

注意: 在表单中使用动态大小功能时,必须牢记以下限制:

代码

请参考以下示例代码,以在表单中配置动态列的大小。

<script>
$(document).ready(function ()
{
// 初始化 Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// 获取表单
var activeSheet = spread.getSheet(0);
activeSheet.suspendPaint();
var colHeader = GC.Spread.Sheets.SheetArea.colHeader;
activeSheet.setRowCount(12);
activeSheet.setColumnCount(5);

// 设置动态列大小
activeSheet.setColumnWidth(0, "1.5*");
activeSheet.setColumnWidth(1, "1.5*");
activeSheet.setColumnWidth(3, "*");
activeSheet.setColumnWidth(4, "*");
//设置行高
activeSheet.setRowHeight(0, 50, colHeader);
for (var row = 0; row < 12; row++)
{
activeSheet.setRowHeight(row, "*");
for (col = 0; col < 5; col++)
{
activeSheet.getCell(row, col)
.cellPadding('0 0 0 10')
.vAlign(GC.Spread.Sheets.VerticalAlign.center);
}
}
activeSheet.setValue(0, 0, 'Company Name', colHeader);
activeSheet.setValue(0, 1, 'City', colHeader);
activeSheet.setValue(0, 2, 'State', colHeader);
activeSheet.setValue(0, 3, 'Phone', colHeader);
activeSheet.setValue(0, 4, 'Fax', colHeader);

activeSheet.setArray(0, 0, [
["Super Mart of the West", "Bentonville", "Arkansas", "(800) 555-2797", "(800) 555-2171"],
["Electronics Depot", "Atlanta", "Georgia", "(800) 595-3232", "(800) 595-3231"],
["K&S Music", "Minneapolis", "Minnesota", "(612) 304-6073", "(612) 304-6074"],
["Tom's Club", "Issaquah", "Washington", "(800) 955-2292", "(800) 955-2293"],
["E-Mart", "Hoffman Estates", "Illinois", "(847) 286-2500", "(847) 286-2501"],
["Walters", "Deerfield", "Illinois", "(847) 940-2500", "(847) 940-2501"],
["StereoShack", "Fort Worth", "Texas", "(817) 820-0741", "(817) 820-0742"],
["Circuit Town", "Oak Brook", "Illinois", "(800) 955-2929", "(800) 955-9392"],
["Premier Buy", "Richfield", "Minnesota", "(612) 291-1000", "(612) 291-2001"],
["ElectrixMax", "Naperville", "Illinois", "(630) 438-7800", "(630) 438-7801"],
["Video Emporium", "Dallas", "Texas", "(214) 854-3000", "(214) 854-3001"],
["Screen Shop", "Mooresville", "North Carolina", "(800) 445-6937", "(800) 445-6938"]
]);

spread.resumePaint();
});
</script>