jQuery EasyUI使用教程之格式化数据网格列

<jQuery EasyUI最新试用版免费下载>

下面的示例格式化easyui数据网格中的列，并使用自定义列的格式程序，如果价格小于20那么文本就将变为红色。

查看jQuery EasyUI演示

想要格式化一个数据网格列，我们需要设置formatter属性，它是一个函数。这个格式化函数包含三个参数：

• value：当前列对应字段值
• row：当前行记录数据
• index：当前行的下标

创建数据网格

1 2 3 4 5 6 7 8 9 10 11 12

< table id = "tt" title = "Formatting Columns" class = "easyui-datagrid" style = "width:550px;height:250px" url = "data/datagrid_data.json" method = "get" 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 >

请注意，“listprice”字段有一个“formatter”属性，用来指明格式化函数。

写格式化函数

1 2 3 4 5 6 7

function formatPrice(val,row){ if (val < 20){ return '<span style="color:red;">(' +val+ ')</span>' ; }  else { return val; } }

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！