小丸工具箱怎么合并字幕(小丸工具箱批量压制字幕)

在前一篇文章中小丸工具箱怎么合并字幕，我们学习小丸工具箱怎么合并字幕了如何使用itemFormatter实现InlineEdit功能。本文在此基础上，介绍实现单元格操作的基本功能：

格式化单元格

合并单元格

合并单元格文字样式

自定义合并

下面分成四部分分别进行实现单元格基本功能的介绍。

一、实现格式化单元格功能

对于FlexGrid，当输入了内容，我们期望根据内容的不同进行格式化。

在itemFormatter中，我们可以获取到四个参数：panel,c,r,cell。

通过panel.getCellData方法可以拿到单元格的数据。

校验是不是需要格式化的列以及设置格式化代码，请参考：

在这里，调用getAmountColor方法来判断不同值采用不同的颜色。

代码参考：

展开全文

初始化，对值得格式化，效果如下：

二、实现合并单元格功能

Wijmo5的FlexGrid支持合并单元格，这个时候需要设置allowMerging属性为wijmo.grid.AllowMerging.All。

然后对于需要合并的列，设置allowMerging为true。

代码参考：

这样时候，就会实现自动的合并单元格内容。

对于合并单元格，选择时候，依然不会直接选择所有合并的行。

如果想要实现这个功能，需要实现两点。

2.1 设置selectionMode

通过修改selectionMode为wijmo.grid.SelectionMode.RowRange。能够选择多行。

2.2 在selectionChanged事件里多选

判断选择的是单个单元格，还是合并单元格，从而通过select方法改变选择的范围。

代码参考：

这个时候，就能实现合并单元格，以及合并单元格的行选。

三、实现合并单元格文字样式功能

对于单元格的样式，我们之前介绍过通过itemFormatter就可以设置，合并单元格的样式，也可以通过它来设置。

用户需要通过getMergeRange方法判断是否是合并单元格，然后对于合并单元格修改样式。

样式中比如，文字居中。

文字水平的位置通过style.textAlign属性设置居中。

文字竖直居中通过css样式来设置。

总得来说，代码参考如下：

四、实现自定义合并功能

合并单元格是依附某种条件。比如我们有两列，想要根据第一列的情况，判定第二列是否合并。针对这种情况，FlexGrid提供了自定义合并的概念，用户可以自定义合并的逻辑。

这个是通过重写CustomMergeManager实现的。

下面就来介绍如何自定义合并的逻辑。

如下图所示，我们有这样的界面：

其中第一列序号列自动合并，我们想要预定列也根据序号列进行合并，而不仅仅是根据内容相同的合并。

这个时候就需要自定义MergeManager实现合并。创建一个新类从MergeManager继承，然后通过这个列自定义代码实现不同的合并方式。

逻辑代码参考如下：

将这个自定义的逻辑写成JS文件，然后在主页面引用：

< src="s/customMergeManager.js" type="text/java"></>

调用自定义的合并：

grid.mergeManager = new wijmo.grid.CustomMergeManager(grid, '序号');

结果如下：

从图中可以看出来，状态列已经根据第一列进行了合并。

FlexGrid包含在全能控件套包中。

关于葡萄城控件

葡萄城是一家跨国软件研发集团，专注控件领域近30年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴