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字，具體取決于代碼示例的展開程度）