EasyUI学习-----表格DataGrid格式化formatter用法

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="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: '学生姓名',
                                 80
                            },
                            {
                                field: 'stuAge',
                                title: '学生年龄',
                                 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="300px;height:250px"></table>
    </body>

</html>

相关阅读:
C++中虚函数
 ES6入门四：对象字面量扩展与字符串模板字面量
 ES6入门三：解构
 ES6入门二：默认值与默认值表达式
 ES6入门一：块级作用域(let&const)、spread展开、rest收集
 JavaScript严格模式
 JavaScript中with不推荐使用，为什么总是出现在面试题中？
ES6入门一：ES6简介及Babel转码器
 HTML5之websocket
HTML5之fileReader异步读取文件及文件切片读取
原文地址：https://www.cnblogs.com/fengfuwanliu/p/10489157.html