bootstrap中的formatter怎么使用

# Bootstrap中的Formatter怎么使用

Bootstrap作为最流行的前端框架之一，提供了丰富的工具和组件来简化开发流程。其中，Formatter（格式化器）是一个常用于数据展示格式化的功能，尤其在表格、表单等场景中非常实用。本文将详细介绍Bootstrap中Formatter的使用方法。

## 什么是Formatter？

Formatter是一种用于对数据进行格式化处理的工具，通常用于将原始数据转换为更易读或符合特定需求的格式。例如：
- 日期格式化（`2023-01-01` → `2023年1月1日`）
- 数字格式化（`1000` → `1,000`）
- 状态码转文字（`1` → `已激活`）

## 常见使用场景

### 1. 表格数据格式化
在Bootstrap Table等组件中，可以通过`formatter`属性自定义单元格内容：

```javascript
$('#table').bootstrapTable({
  columns: [{
    field: 'price',
    title: '价格',
    formatter: function(value) {
      return '¥' + value.toFixed(2);
    }
  }]
});

2. 表单输入格式化

使用JavaScript库如cleave.js结合Bootstrap实现输入时格式化：

<input type="text" class="form-control" id="phone">

<script>
  new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'CN'
  });
</script>

实现自定义Formatter

基础示例：状态显示

function statusFormatter(value) {
  const classes = {
    1: 'badge-success',
    2: 'badge-warning',
    3: 'badge-danger'
  };
  const texts = {1: '正常', 2: '警告', 3: '错误'};
  return `<span class="badge ${classes[value]}">${texts[value]}</span>`;
}

带参数的进阶Formatter

function dateFormatter(value, format = 'YYYY-MM-DD') {
  return moment(value).format(format);
}

// 使用示例
columns: [{
  field: 'create_time',
  formatter: (value) => dateFormatter(value, 'YYYY年MM月DD日')
}]

推荐工具库

1. Moment.js
   专业的日期格式化库：

   moment().format('YYYY-MM-DD HH:mm:ss');
   

2. Numeral.js
   数字格式化工具：

   numeral(1000).format('0,0'); // 输出"1,000"
   

3. Cleave.js
   实时输入格式化：

   new Cleave('#credit-card', {
    creditCard: true
   });
   

注意事项

1. XSS防护：动态生成HTML时需转义内容：

   function safeFormatter(value) {
    return $('<div>').text(value).html();
   }
   

2. 性能优化：避免在formatter中进行复杂计算

3. 国际化：考虑多语言场景下的格式化需求

通过合理使用Formatter，可以显著提升数据展示的专业性和用户体验。建议结合具体业务需求选择合适的实现方式。 “`

（注：实际字符数约650字，具体取决于代码示例的展开程度）