jQuery EasyUI 数据网格 - 格式化列

jQuery EasyUI 数据网格是一款基于jQuery的开源表格控件，可以帮助开发者实现数据展示、编辑、删除等功能。其中，格式化列可以帮助开发者根据业务需求对数据网格的列进行格式化，满足对数据展示的需求。下文将介绍如何使用格式化列进行数据网格的自定义格式化。

使用方式

在定义数据网格的列的时候，可以使用formatter属性对数据进行格式化。

$('#datagrid').datagrid({
   columns:[[
       {field:'name',title:'姓名',width:100,formatter:formatName},
       {field:'age',title:'年龄',width:100},
       {field:'gender',title:'性别',width:100},
       {field:'email',title:'邮箱',width:200}
   ]]
});

其中，formatter属性可以设置为一个函数名，也可以是一个定义的匿名函数。当数据网格进行渲染时，会自动调用该函数，并将当前单元格的值传给该函数进行处理。函数的返回值将被用作单元格的显示内容。在上面的列定义中，定义了一个函数formatName，用于将输入的字符串格式化为首字母大写的形式。下面将介绍如何定义格式化函数。

格式化函数

格式化函数接收一个参数，表示该列当前行的值。开发者可以根据需要对该值进行处理，返回一个格式化后的结果。下面的示例展示如何格式化显示银行卡号，将中间的数字替换为星号。

function formatBankCard(value){
   let len = value.length;
   if(len > 8){
      let hideLen = len - 8;
      let hideStr = '';
      for(let i = 0;i < hideLen;i++){
         hideStr += '*';
      }
      value = value.substring(0,4) + hideStr + value.substring(len-4);
   }
   return value;
}

在这个示例中，格式化函数首先获取银行卡号的长度，然后根据长度将中间部分进行替换，并返回格式化后的结果。使用该函数对数据网格的列进行格式化：

$('#datagrid').datagrid({
   columns:[[
       {field:'bankCard',title:'银行卡号',width:200,formatter:formatBankCard},
       {field:'amount',title:'交易金额',width:100},
       {field:'type',title:'交易类型',width:100},
       {field:'time',title:'交易时间',width:200}
   ]]
});

高级格式化

在某些情况下，需要根据当前单元格的值，设置单元格的样式、图标或者其他属性。使用高级格式化可以实现这一目的。高级格式化是指在格式化函数中返回一个包含value、css、class、attr等属性的对象，用于设置单元格内容和样式等属性值。

下面的示例展示如何在数据网格中使用高级格式化，将银行卡号根据是否有欠款显示不同的样式。

function formatBankCard(value){
   let len = value.length;
   if(len > 8){
      let hideLen = len - 8;
      let hideStr = '';
      for(let i = 0;i < hideLen;i++){
         hideStr += '*';
      }
      value = value.substring(0,4) + hideStr + value.substring(len-4);
   }
   let css = value.indexOf('欠款') >= 0 ? 'color:red;font-weight:bold;' : '';
   return {value,css};
}

在这个示例中，formatBankCard函数首先根据银行卡号的长度进行替换，然后根据是否有欠款设置单元格的样式。value属性表示单元格的值，css属性表示单元格的样式，可以设置为任何合法的CSS样式。

在数据网格的列定义中使用高级格式化：

$('#datagrid').datagrid({
   columns:[[
       {field:'bankCard',title:'银行卡号',width:200,formatter:formatBankCard},
       {field:'amount',title:'交易金额',width:100},
       {field:'type',title:'交易类型',width:100},
       {field:'time',title:'交易时间',width:200}
   ]]
});

小结

通过上述的介绍，我们可以了解到，jQuery EasyUI 数据网格 - 格式化列可以非常方便地对数据进行格式化，实现自定义的展示效果。我们可以使用格式化函数对单元格的值进行处理，也可以使用高级格式化对单元格的样式进行设置。在实际的应用场景中，通过灵活使用格式化列，可以满足各种不同的业务需求。