首页 > 代码库 > easyui formatter用法，转载

easyui formatter用法，转载

2024-07-12 12:11:09   222人阅读

以下实例格式化数据表格中的一列。如果金额小于20时使用自定义的格式器将文本变成红色。
 
 
要格式化数据表格列，需要设置formatter属性，该属性是一个函数，它包含两个参数: 

value: 对应字段的当前列的值 
record: 当前行的记录数据 

$(‘#tt‘).datagrid({ 
title:‘Formatting Columns‘, 
width:550, 
height:250, 
url:‘datagrid_data.json‘, 
columns:[[ 
{field:‘itemid‘,title:‘Item ID‘,width:80}, 
{field:‘productid‘,title:‘Product ID‘,width:80}, 
{field:‘listprice‘,title:‘List Price‘,width:80,align:‘right‘, 
formatter:function(val,rec){ 
if (val < 20){ 
return ‘<span style="color:red;">(‘+val+‘)</span>‘; 
} else { 
return val; 
} 
} 
}, 
{field:‘unitcost‘,title:‘Unit Cost‘,width:80,align:‘right‘}, 
{field:‘attr1‘,title:‘Attribute‘,width:100}, 
{field:‘status‘,title:‘Status‘,width:60} 
]] 
}); 

///下面是w3cschool的例子：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="keywords" content="jquery,ui,easy,easyui,web"><meta name="description" content="easyui help you build your web page easily!"><title>jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.w3cschool.cc/try/jeasyui/jquery.easyui.min.js"></script><script>function formatPrice(val,row){if (val < 20){return ‘<span style="color:red;">(‘+val+‘)</span>‘;} else {return ‘<span style="color:green;">(‘+val+‘)</span>‘;}}</script></head><body><h1>DataGrid</h1><table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"url="data/datagrid_data.json"singleSelect="true" iconCls="icon-save"><thead><tr><th field="itemid" width="80">Item ID</th><th field="productid" width="80">Product ID</th><th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th><th field="unitcost" width="80" align="right">Unit Cost</th><th field="attr1" width="100">Attribute</th><th field="status" width="60" align="center">Stauts</th></tr></thead></table></body></html>
View Code

 


联系
我们