websheet 之 table表格

本控件只实现table的基础功能。
{.is-danger}

一、table基本使用

        可以通过addTable函数动态增加table，代码如下：

   let tableColumn = [];let col = 1;tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');tableColumn.push('测试' + (col++) + '列');activeSheet.addTable('测试1', 'C2:L12', tableColumn, 'TableStyleMedium2');

        参数入下。

位置	样例	说明
1	‘测试1’	表格的名称，下面操作根据此名称
2	‘C2:L12’	表格的范围，包括表头
3	tableColumn	表格表头的名称数组
4	‘TableStyleMedium2’	表格展示的默认样式

本控件只支持 'TableStyleMedium2’和TableStyleMedium28样式，其他样式可以在xlsx模版内定义，加载模版使用或参考4.1设置table的样式。
{.is-warning}

在线代码
{.is-success}

        最终结果：

二、设置table的数据源

2.1 二维数组数据

        正常情况是后台返回给前端的json数据，这里利用字符串模拟了后台的数据，并把数据转换了employees数组对象。

  const jsonString = ` [{"employeeId": "EM001","name": "李强","gender": "男","age": 32,"department": "技术部","position": "高级软件工程师","hireDate": "2018-05-15","email": "zhangwei@company.com","phone": "+86 13812345678","salary": 28000,"status": "在职"},{"employeeId": "EM002","name": "王芳","gender": "女","age": 28,"department": "人力资源部","position": "招聘主管","hireDate": "2020-09-22","email": "wangfang@company.com","phone": "+86 13987654321","salary": 18000,"status": "在职"} ] ` ;const employees = JSON.parse(jsonString);

2.2 列名顺序设置数据源

        默认模式下，根据二维数组数据的顺序来填充table内的数据。代码如下：

   activeSheet.SetTableData('测试1', employees);//数组对象，按照顺序这是表格数据，根据数组的长度确认表格长度

        参数入下。

位置	样例	说明
1	‘测试1’	表格的名称
2	employees	二维数组，见2.1小结

2.2 通过列名称设置数据源

        该模式下根据定义的名称对应到不同的列上，与展示的列名称不同，首先设置列名对照：

      let tableColumn2 = [];tableColumn2.push({ showName: '工号', codeName: 'employeeId' });tableColumn2.push({ showName: '姓名', codeName: 'name' });tableColumn2.push({ showName: '性别', codeName: 'gender' });tableColumn2.push({ showName: '年龄', codeName: 'age' });tableColumn2.push({ showName: '部门', codeName: 'department' });tableColumn2.push({ showName: '职称', codeName: 'position' });tableColumn2.push({ showName: '入职日期', codeName: 'hireDate' });tableColumn2.push({ showName: '电子邮件', codeName: 'email' });tableColumn2.push({ showName: '移动电话', codeName: 'phone' });tableColumn2.push({ showName: '薪资', codeName: 'salary' });tableColumn2.push({ showName: '状态', codeName: 'status' });activeSheet.SetTableColumn('测试1', tableColumn2);

        再设置数据源。代码如下：

   activeSheet.SetTableData('测试1', employees);//数组对象，按照顺序这是表格数据，根据数组的长度确认表格长度

在线代码
{.is-success}

        最终结果：

三、获取table的数据

3.1 无列名模式

        该模式是默认的情况下，没有设置2.2 通过列名称设置数据源，获取数据。代码如下：

   let aaa=activeSheet.GetTableDate('测试1')

        数据如下：

在线代码
{.is-success}

3.1 有列名模式

        有列名模式是通过2.2 通过列名称设置数据源方式设置后获取数据。代码如下：

   let aaa=activeSheet.GetTableDate('测试1')

        数据如下：

在线代码
{.is-success}

四、设置table的列编辑器

        样例中设置了部门可以从下拉中选择，在开始时设置了’G3:G12’范围的选择，本控件会根据数据源的数据自动填充剩余的单元格为该编辑器。

   //下拉选择const jsb = document.createElement('option');jsb.value = '技术部';jsb.textContent = '技术部';const rlb = document.createElement('option');rlb.value = '人力资源部';rlb.textContent = '人力资源部';const glb = document.createElement('option');glb.value = '管理层';glb.textContent = '管理层';let optionsBm = [jsb, rlb, glb];activeSheet.setCellEditor('G3:G12', websheet.Model.SelectCell, optionsBm)

在线代码
{.is-success}

五、设置table的列格式

        样例中设置表头字体为“隶书”，设置了薪金的自定义格式化等内容。同第四章，本控件会根据数据源的数据自动填充数据的格式。

     let newFontls = new websheet.Model.Font();newFontls.name = '隶书';newFontls.sz = 18;newFontls.color.rgb = '#FFFFFF';activeSheet.SetCellFont('C2', newFontls);let centeCenter = new websheet.Model.CellAlignment();centeCenter.horizontal = 'center';//垂直方面centeCenter.vertical = 'center';//水平方向activeSheet.SetCellAlignment('C2', centeCenter); // //自定义 -薪资格式化let numFmt200 = new websheet.Model.NumFmt();numFmt200.numFmtId = 200;numFmt200.formatCode = '#,##0.0000_);[Red]\(#,##0.0000\)';let rightCenter = new websheet.Model.CellAlignment();rightCenter.horizontal = 'right';//垂直方面rightCenter.vertical = 'center';//水平方向activeSheet.SetCellAlignment('L13', rightCenter);  activeSheet.SetCellNumFmts('L3:L13', numFmt200);

在线代码
{.is-success}

六、表格统计

        样例中在表格下一行增加了年龄平均数和薪资的函数。同第四章，本控件会根据数据源的数据自动调整函数的计算范围。

   activeSheet.SetCellValue(13, 5, '平均年龄：');activeSheet.SetCellValue(13,6, '=AVERAGE(F3:F12)');activeSheet.SetCellValue(13, 11, '薪资总计：');activeSheet.SetCellValue(13, 12, '=SUM(L3:L12)');

在线代码
{.is-success}

七、自定义table的样式

        待开发