1.通过HTML标签创建数据表格时使用formatter
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(document).ready(function(){ var data = { "rows": [{ "stuName": "李斯", "stuAge": 23 }, { "stuName": "白起", "stuAge": 25 }], "total": 2 } $(‘#tt‘).datagrid(‘loadData‘,data); }) //value：字段值；row：行记录数据；index: 行索引 function formatPrice(value,row,index) { if(value>=20){ return ‘<span style="color:blue;">‘ + value + ‘</span>‘; } } </script> </head> <body> <table id="tt" title="studentInfo" class="easyui-datagrid" style="width:300px;height:250px"> <thead> <tr> <th field="stuName" width="80">学生姓名</th> <th field="stuAge" width="80" formatter="formatPrice">学生年龄</th> </tr> </thead> </table> </body> </html>
2.通过JS创建数据表格时使用formatter
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(document).ready(function() { var data = { "rows": [{ "stuName": "李斯", "stuAge": 23 }, { "stuName": "白起", "stuAge": 25 }], "total": 2 } $("#tt").datagrid({ columns: [ [{ field: ‘stuName‘, title: ‘学生姓名‘, width: 80 }, { field: ‘stuAge‘, title: ‘学生年龄‘, width: 80, formatter: function(value, row, index) { if(value >= 20) { return ‘<span style="color:blue;">‘ + value + ‘</span>‘; } } } ] ] }).datagrid(‘loadData‘, data); }) </script> </head> <body> <table id="tt" title="studentInfo" style="width:300px;height:250px"></table> </body> </html>
EasyUI表格DataGrid格式化formatter用法
原文：https://www.cnblogs.com/fengfuwanliu/p/10489157.html