Wijmo5 FlexGrid教程（6）- 实现格式化单元格功能

在之前的文章中，我们介绍了itemFormatter的用法，实现了自定义Editor以及InlineEdit。本文就在之前的基础上，介绍如何使用itemFormatter来实现格式化单元格。对于flexgrid，当输入了内容，我们期望根据内容的不同进行格式化。在itemFormatter中，我们可以获取到四个参数：panel,c,r,cell。通过panel.getCellData方法可以拿到单元格的数据。

发布于 2015/10/27 00:00

WijmoJS

在之前的文章中，我们介绍了itemFormatter的用法，实现了自定义Editor以及InlineEdit。

本文就在之前的基础上，介绍如何使用itemFormatter来实现格式化单元格。

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

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

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

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

// validate CellType and if correct column
                        if (wijmo.grid.CellType.Cell == panel.cellType &&
                          panel.columns[c].binding == 'amount') {

                            // get the cell's data
                            var cellData = panel.getCellData(r, c);

                            // set cell's foreground color
                            cell.style.color = getAmountColor(cellData);
                        }

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

代码参考：

// get the color used to display an amount
                function getAmountColor(minfloor) {
                    return minfloor < 1000 ? 'blue' : minfloor < 6000 ? 'black' : 'red';
                }

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

进入编辑状态，修改Amount列的单元格的值，颜色会随着值做格式化。

比如修改第一行的Amount列的值为6500，效果变成如下：

本文的源代码请参考：

flexgrid_formatter.zip (88.52 kb)

如果你对Wijmo5感兴趣，可以到如下链接下载：

/download/?pid=54

请参考Wijmo5技术文章汇总

WijmoJS | 下载试用

WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。

为顺利推进您的产品选型，推荐如下方式，加速产品评估进度：