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="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>

posted @ 2019-03-07 14:02 风拂晚柳阅读(833) 评论(0) 收藏举报

刷新页面返回顶部