easyUI的formatter使用

时间:2021-05-04 06:31:49
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
  1. 比如我对名称这一栏需要格式设置
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">编码</th>
<th data-options="field:'name',width:100 formatter=formatLink ">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>

  2.来看一下js代码实现

单元格formatter(格式化器)函数,带3个参数:
value:字段值。
row:行记录数据。
index: 行索引。
代码示例: $('#dg').datagrid({
columns:[[
{field:'name',title:'名称', width:80,
formatter: function(value,row,index){
if (row.code=='1001'){
return val;
} else {
return null;
}
}
}
]]
});

  3.或者直接写一个function formatLink{}

so easyUI !