jEasyUI 格式化列学习笔记

jEasyUI 是一个基于 jQuery 的开源 UI 框架，提供了丰富的用户界面组件和易用的 API，适合用于快速构建现代 Web 应用程序。其中，格式化列是 jEasyUI 数据表格（datagrid）组件的一个重要功能，可以用来对表格中的数据进行格式化、加工、计算等操作。

基本用法

通过在定义列时设置 formatter 属性，可以指定该列的格式化函数，该函数会对该列中的每个单元格的值进行转换，并返回变换后的值。例如：

javascriptCopy Code
$('#datagrid').datagrid({
  columns: [[
    { field: 'name', title: '姓名' },
    { field: 'age', title: '年龄', formatter: function(value,row,index){
        if (value < 18){
            return '<span style="color:red;">'+value+'</span>';
        } else {
            return value;
        }
    }}
  ]],
  data: [
    { name: '张三', age: 20 },
    { name: '李四', age: 16 }
  ]
});

在上述代码中，我们为 age 列设置了一个 formatter 函数，如果该列的值小于 18，则将其显示为红色，否则保持原样。

实际应用

下面我们举一个实例来说明格式化列的实际应用。假设我们有一个订单列表，其中包含了订单编号、客户姓名、下单时间、订单金额等信息。现在我们要对订单金额一列进行格式化，将其转换为人民币格式，并添加千位分隔符和小数点后两位。我们可以定义如下的 formatter 函数：

javascriptCopy Code
function formatMoney(value,row,index){
  if (value == null || value === ''){ return ''; }
  var num = parseFloat(value);
  if (isNaN(num)){ return value; }
  var sign = num < 0 ? '-' : '';
  var cents = Math.abs(num).toFixed(2);
  var thousands = '';
  while (cents.length > 3){
    thousands = ',' + cents.slice(-3) + thousands;
    cents = cents.slice(0, -3);
  }
  return sign + '¥' + cents + thousands;
}

在该函数中，我们首先判断输入的值是否为空或者无效，如果是，则返回空字符串。接着，我们将输入的值转换为浮点数，并判断其正负性。然后，我们将其小数点后两位进行四舍五入，并添加千位分隔符，最后将其转换为人民币格式，返回变换后的值。

最后，我们在数据表格组件的定义中，将金额列的 formatter 属性设置为该函数即可实现对该列数据的格式化：

javascriptCopy Code
$('#datagrid').datagrid({
  columns: [[
    { field: 'id', title: '订单编号' },
    { field: 'customerName', title: '客户姓名' },
    { field: 'orderTime', title: '下单时间' },
    { field: 'amount', title: '订单金额', formatter: formatMoney }
  ]],
  data: [
    { id: '20230001', customerName: '张三', orderTime: '2023-06-01', amount: 123456.78 },
    { id: '20230002', customerName: '李四', orderTime: '2023-06-02', amount: 987654.32 }
  ]
});

最终结果如下：

通过格式化列的功能，我们可以轻松地实现对数据表格中的数据进行格式化、加工、计算等操作，从而满足各种需求。