以下实例格式化数据表格中的一列。如果金额小于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>
easyui formatter用法,转载
时间: 2024-08-27 20:43:28