easyui datagrid中 formatter的用法

Posted 2020-11-21 huameitang

 1.基本用法
单元格formatter(格式化器)函数，带3个参数：
value：字段值。
row：行记录数据。
index: 行索引。

$(‘#dg‘).datagrid({
    columns:[[
        {field:‘userId‘,title:‘User‘, width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});

(formatter这个属性属于列参数，意思就是对当前列的数据进行格式化操作，它是一个函数，有三个参数value，row和index。value: 代表当前单元格中的值。row：代表当前行。index: 代表当前行的下标。)

（1）value:可以在formatter函数中修改value的值，并在界面上展示修改后的值。 **注意:** 在这里对value的修改并不会改动后台数据，这个改动仅相当于对value的渲染。

（2）row:可以通过 row["field值"] 或者 row.field值 得到同一行其他列的值。可以是前面的列，也可以是后面的列。

（3）index:行索引。（项目中没用到过）

例：

当后台返回 ture 或者 false 时，下面的效果一样：

{field:‘usedFlag‘, title:‘可用标识‘,width:80,align:‘center‘,formatter: function(value,row,index){
    if (row.usedFlag == ‘1‘){
        return "可用";
    } else if (row.usedFlag == ‘0‘) {
        return "不可用";
    } else {
        return "未知状态[" + value + "]";
    }
}},

{field:‘usedFlag‘, title:‘可用标识‘,width:80,align:‘center‘,formatter: function(value,row,index){
    if (value == ‘1‘){
        return "可用";
    } else if (value == ‘0‘) {
        return "不可用";
    } else {
        return "未知状态[" + value + "]";
    }
}},